CSS3_实现圆角效果box-shadow

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

CSS3_实现圆角效果box-shadow1.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) 改为内部阴影;

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航