CSS3

1.outline的直角与圆角

来给个div：

<div class="use-outline"></div>

来再给个样式：

1 .use-outline{ 2 3 width: 200px; 4 height: 200px; 5 background: #009dda; 6 margin: 100px 40px; 7 border-radius: 10px; 8 border: 10px solid #c24263; 9 10 11 outline: 20px solid #26C2A7; 12 -moz-outline-radius: 30px; 13 14 }

看一下效果图：

-moz-outline-radius: 30px;属性使得绿色的 outline 成圆角。但是这个属性只能在FireFox浏览器中使用。切 ！！！！这还怎么玩。。所以不用它了接下来换一个，box-shadow(盒阴影)

1.outline的直角与圆角

给个样式：

1 .use-outline{ 2 width: 200px; 3 height: 200px; 4 background: #009dda; 5 margin: 100px 40px; 6 border: 10px solid #c24263; 7 border-radius: 10px; 8 9 box-shadow:0px 0px 0px 25px #c032cc; 10 }

 

看一下效果图：

]

box-shadow: h-shadow v-shadow blur spread color inset; box-shadow中的6个参数分别为：　　h-shadow:水平阴影的位置，可为负值；　　v-shadow:垂直阴影的位置，可为负值；　　blur:可选。模糊距;　　spread:可选。阴影的尺寸;　　color:可选。阴影的颜色;　 inset:可选。将外部阴影 (outset) 改为内部阴影;兼容性处理： filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）)这是理论，下面给你个例子：#sean_msg{ filter: progid:DXImageTransform.Microsoft.Shado(Strength=3, Direction=135, Color='#999999'); 上面是IE的样式代码-webkit-box-shadow:2px 2px 3px #aaa; -------这是兼容谷歌浏览器-moz-box-shadow:2px 2px 3px #aaa; --------这是兼容火狐浏览器background:#fff; } 

转载于:https://www.cnblogs.com/xinxingyu/p/4663964.html