box-shadow技巧分享

Posted 2020-08-31

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);
　　　　}

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