您所在的位置:小祥子 » 编程 » CSS » 正文

CSS3_实现圆角效果box-shadow

时间:2015-07-21 编辑:不得不爱xxy 来源:CnBlogs

1.outline的直角与圆角

来给个div:

<div class="use-outline"></div>

来再给个样式:

 .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的直角与圆角

给个样式:

 .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) 改为内部阴影;
 
关键词:CSS 圆角 效果