文章内容
一、CSS设置特殊阴影效果方法
- 1、通过主元素和副元素的阴影效果叠加产生曲线阴影效果；
- 2、通过添加两个副元素，并将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形，然后遮盖在主元素下面来实现翘边阴影效果。
二、box-shadow属性
box-shadow属性可以将阴影应用于文本框，可设置中阴影的像素长度，宽度和模糊的距离以及阴影的颜色。
1、语法
box-shadow: h-shadow v-shadow blur spread color inset;
2、参数
- h-shadow：设置水平阴影的位置，允许负值；必需值，不可省略。
- v-shadow：设置垂直阴影的位置，允许负值；必需值，不可省略。
- blur：设置模糊距离；可选值，可省略。
- spread：设置阴影的大小；可选值，可省略。
- color：设置阴影的颜色；可选值，可省略。
- inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。
三、曲线阴影
1、实现方法
曲线阴影的实现原理是通过阴影的叠加效果产生的。即一个主元素设置阴影后，在主元素下面再添加一个副元素。使副元素和主元素重合，且副元素为一个弧形元素。此时主元素和副元素的阴影效果叠加产生曲线阴影。
2、实现步骤
- 第一步：为主元素添加内部阴影，v和h方向的大小都设置为0，但是模糊半径设置的要较大，从而实现主元素内部的阴影效果。
- 第二步：此时副元素需要变换的属性有：添加到主元素层级的下层，通过z-index来实现；在主元素后面或者前面添加副元素；副元素需要变换为弧形：border-radius:100px/10px;通过绝对定位确定副元素的位置；为副元素添加阴影。
3、HTML
<p class="wrap effect">
<h1>Shawdow Effect</h1>
</p>
4、CSS样式
.effect {
position: relative;
box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0px 0px 50px #ddd inset;
}
.effect:after, .effect:before {
content: '';
background: #fff;
position: absolute;
z-index: -1;
left: 10px;
right: 10px;
top:50%;
bottom: 0px;
border-radius: 100px/10px;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
四、翘边阴影
1、实现方法
翘边阴影的原理和曲线阴影是差不多的，但是翘边阴影却用到了扭曲和旋转两个属性。翘边阴影在左边和右边也是添加两个副元素，然后将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形，然后遮盖在主元素下面。
2、CSS样式
.box {
width: 980px;
height: auto;
clear: both;
overflow: hidden;
margin: 20px auto;
}
.box li {
width: 300px;
height: 210px;
float: left;
background: white;
margin: 20px 10px;
border: 2px solid #efefef;
box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
position: relative;
}
.box li img {
display: block;
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: '';
z-index: -1;
position: absolute;
width: 90%;
height: 80%;
left: 20px;
bottom: 8px;
background:transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: skew(-12deg) rotate(-4deg);
}
.box li:after {
content: '';
z-index: -1;
position: absolute;
width: 90%;
height: 80%;
right: 20px;
bottom: 8px;
background:transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.6);
transform: skew(12deg) rotate(4deg);
}