你的位置:首页 > 网页设计

[网页设计]CSS3_实现圆角效果box

1.outline的直角与圆角

来给个div:

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