box-shadow技巧分享

2018-06-24 00:58:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

box-shadow

 box-shadow在定义里是这么说的:"box-shadow 属性向框添加一个或多个阴影。"

是的,和他的名字一样,这个属性固然是用来制造阴影效果让页面更有立体感的。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

其中属性分别为:
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。请参阅 CSS 颜色值。
inset:可选。将外部阴影 (outset) 改为内部阴影。

浏览器支持:
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

我从慕课网上看到Amy老师讲的 css3"图片阴影"效果 一课里学到不少,其中就提到了曲线阴影和翘边阴影。
课程链接:http://www.imooc.com/learn/240


曲线阴影

 原理:

   给元素本身设置阴影,再利用befor以及after伪类创建元素,给伪类也设置同样的阴影,让三个阴影重叠就实现了炫酷的阴影效果。(●'?'●)

代码:

  html:     

             <div class="wrap effect">
       <h1>shadow effect</h1>
      </div>

  css:

    .wrap{
      width: 70%;
      height: 200px;
      margin: 50px auto;
      background: #fff;
      }
    .wrap h1{
      font-size: 20px;
      text-align: center;
      line-height: 200px;
      }
    .effect{
      position: relative;
      box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
      -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
      -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
      -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0px 0px 40px rgba(0,0,0,0.1) inset;
      }
    .effect:after,.effect:before{
      content: '';
      position: absolute;
      background: #fff;
      top: 50%;
      bottom: 0px;
      left: 10px;
      right: 10px;
      box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
      -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
      -o-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
      -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
      border-radius:100px/10px ;
      z-index: -1;
      }

翘边阴影

 原理:

  与曲线阴影类似,利用两个伪类创造阴影效果,利用transform改变伪类形状成为平行四边形,分别一左一右的方向。

代码:

  html:   

      <ul class="box">
        <li><img src="img/2.png"/></li>
        <li><img src="img/3.png"/></li>
        <li><img src="img/4.png"/></li>
      </ul>

  css: 

    .box li{
      width: 240px;
      height: 240px;
      list-style: none;
      float: left;
      margin: 20px 10px;
      border: 2px solid #efefef;
      box-shadow: 0 1px 4px rgba(0,0,0,0.27);
      -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
      -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
      -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27);
      position: relative;
      background: #fff;
      }
    .box li>img{
      display: block;
      margin: 11px;
    }
    .box li:before{
      content: '';
      position: absolute;
      width: 90%;
      left: 20px;
      bottom: 10px;
      background: transparent;
      box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      z-index: -1;
      transform: skew(-10deg) rotate(-7deg);
      -webkit-transform: skew(-10deg) rotate(-7deg);
      -o-transform: skew(-10deg) rotate(-7deg);
      -moz-transform: skew(-10deg) rotate(-7deg);
      -ms-transform: skew(-10deg) rotate(-7deg);
    }
    .box li:after{
      content: '';
      position: absolute;
      width: 90%;
      height: 80%;
      left: 20px;
      bottom: 10px;
      background: transparent;
      box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -moz-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      -o-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
      z-index: -1;
      transform: skew(10deg) rotate(7deg);
      -webkit-transform: skew(10deg) rotate(7deg);
      -o-transform: skew(-10deg) rotate(7deg);
      -moz-transform: skew(10deg) rotate(7deg);
      -ms-transform: skew(10deg) rotate(7deg);
    }

大家可以把代码复制粘贴,自己查看一下元素研究一下具体详情,还有不懂的可以直接打开上面提到的课程自行学习。

 

福利:

喜欢偷懒的直接拿去复制粘贴吧,我经常用到的阴影代码

                    box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
                    -webkit-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;
                    -moz-box-shadow:3px 2px 7px #DCDCDC, 2px 2px 5px #DCDCDC;

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位

下一篇:前端移动端开发经验总结