#|轮廓阴影和圆角 java|windows|angular.js|css

轮廓阴影和圆角轮廓阴影

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