2017-03-06

学习创建CSS盒子阴影效果

Learn How To Create Different CSS Box Shadow Effects

CSS 盒子阴影

box-shadow 属性允许我们通过指定颜色、大小、模糊和偏移等值很简单地在盒元素上创建多个阴影效果。

box-shadow 属性可以接受2-6个属性，必须的选项有水平和垂直方向上的偏移，可选选项有延伸距离和颜色。

1	box-shadow: inset horizontal vertical blur spread colour;

示例

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

浏览器支持

所有主流浏览器的最新版都已经支持了 box-shadow 属性。

Internet Explorer 9.0 and higher
Firefox 3.5 and higher
Chrome 1 and higher
Safari 3 and higher
Opera 10.5 and higher

示例效果

以下例子共同的代码

1
2
3

<div class="box effect1">
    <h3>阴影效果一</h3>
</div>

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

CSS 阴影效果一

这会创建一个标准的盒子阴影效果，阴影移到元素下来创建一个看似升起的盒子。

/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
     box-shadow: 0 10px 6px -6px #777;
}

CSS 阴影效果二

本效果会将阴影添加到盒子元素的右下角和右下角，用以创造一个盒子两个底部角翘起的视觉效果；该效果使用了:before和:after伪元素来创建新的元素放在盒子的两个角上。

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2 {
  position: relative;
}
.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

CSS 阴影效果三

本文标题:学习创建CSS盒子阴影效果

文章作者:zhyihui

发布时间:2017-03-06, 16:27:49

最后更新:2017-03-06, 17:48:44

原始链接:http://zhyihui.github.io/2017/03/06/learn-css-box-shadow/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。