欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2024-02-04 09:36:16
...

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