CSS3_实现圆角效果box-shadow

1.outline的直角与圆角

来给个div：

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

来再给个样式：

.use-outline{
           
            width: 200px;
            height: 200px;
            background: #009dda;
            margin: 100px 40px;
            border-radius: 10px;
            border: 10px solid #c24263;


            outline: 20px solid #26C2A7;
            -moz-outline-radius: 30px;

        }                    

看一下效果图：

-moz-outline-radius: 30px;属性使得绿色的 outline  成圆角。但是这个属性只能在FireFox浏览器中使用。切 ！！！！这还怎么玩。。所以不用它了

接下来换一个，box-shadow(盒阴影)

1.outline的直角与圆角

给个样式：

.use-outline{
            width: 200px;
            height: 200px;
            background: #009dda;
            margin: 100px 40px;
            border: 10px solid #c24263;
            border-radius: 10px;

            box-shadow:0px 0px 0px 25px #c032cc;
        }

 

看一下效果图：

]

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