首页 > HTML/CSS

CSS3实现圆角效果box-shadow

发表于2015-07-21 14:44:44| --次阅读| 来源webkfa| 作者html,css

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

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1