CSS3实现圆角效果box-shadow
|
|
摘要：1.outline的直角与圆角来给个div：来再给个样式： 1 .use-outline{ 2 3 width: 200px; 4 height: 200px; 5 background: #009dda...
1.outline的直角与圆角
来给个div：
<div class="use-outline"></div>
来再给个样式：
1 .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的直角与圆角
给个样式：
1 .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) 改为内部阴影;