1.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; }