轮廓阴影和圆角

Posted 2022-04-02 江州益彤

轮廓阴影和圆角

轮廓阴影

.box1 
			width: 200px;
			height: 200px;
			background-color: #bfa;
			/* outline用来设置元素的轮廓线，用法和border一样，
			 不影响可见框的大小*/
			/* outline: 10px,red solid; */
			/* 阴影效果 
			第一个值 水平偏移量
			第二个值 垂直偏移量
			第三个值 模糊半径
			第四个值 阴影的偏移量
			*/
			box-shadow: 10px 10px 50px rgba(0,0,0,.3);
			/*设置一个下外边距*/
			/* margin-bottom: 100px; */

内阴影：box-shadow: insert 10px 10px 50px rgba(0,0,0,.3);

圆角

.box2 
			width: 200px;
			height: 200px;
			background-color: #bfa;
			/* 
			 border-radius(左上，右上，右下，左下)
			 四个值左上右上右下左下
			 三个值左上右上/左下右下
			 两个值左上/右下右上/左下
			一个值都设置
			
			将元素设置成圆形
			 border-radius（50%）
			 */
			border-radius:;
			border-top-left-radius: 50px;
			border-top-right-radius: 50px 80px;
			border-bottom-left-radius: ;
			border-bottom-right-radius: ;
			/*设置一个上外边距*/
	margin-top: 100px;

轮廓阴影和圆角

轮廓

outline：10px red solid;

outline用来设置元素的轮廓线，用法和border一样，但不会影响可见框的大小

阴影

box-shadow:10px 0px 50px rgba(0,0,0,.3)

水平偏移量，垂直偏移量，阴影的模糊半径，阴影的颜色

圆角

border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

border-bottom-right-radius:50px 100px;
							x值  y值
/*
border-radius可以分别指定四个角的圆角
四个值左上 + 右上 + 右下 + 左下
三个值左上 + 右上/左下 + 右下
两个个值左上/右下 + 右上/左下
*/
border-radius: 20px / 40px;
设置成圆形
border-radius: 50%;