CSS3_实现圆角效果box-shadow_html/css_WEB-ITnose

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) 改为内部阴影;

登录后复制

登录后复制