CSS3新增了box-shadow，用于设置盒子的阴影，今天学习一下！
部分效果展示：
效果1 彩色边框效果
CSS代码如下
div.one div { 100px; height: 100px; margin: 50px auto; background-color: rgb(245, 234, 234); box-shadow: 10px 0 15px -2px rgb(11, 11, 235), 0 -10px 15px -2px rgb(103, 167, 8), -10px 0 15px -2px rgb(228, 64, 4), 0 10px 15px -2px rgb(241, 7, 132); } div.one div:nth-of-type(1) { border-radius: 5%; } div.one div:nth-of-type(2) { border-radius: 30%; } div.one div:nth-of-type(3) { border-radius: 50%; }
效果2 多边框效果
代码如下
.two div { 80px; height: 80px; margin: 50px auto; background-color: rgb(238, 226, 226); box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset; } .two div:nth-of-type(1) { border-radius: 5%; } .two div:nth-of-type(2) { border-radius: 30%; box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset; } .two div:nth-of-type(3) { border-radius: 50%; box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset; }
效果3 内阴影效果
代码如下
.three div { 200px; height: 200px; overflow: hidden; margin: 100px auto; } .three div>img { height: 200px; position: relative; z-index: -1; } .three div:nth-of-type(1) { box-shadow: 0 0 5px 10px rgba(2, 158, 248, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 5%; } .three div:nth-of-type(2) { box-shadow: 0 0 5px 10px rgba(14, 228, 43, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 30%; } .three div:nth-of-type(3) { box-shadow: 0 0 5px 10px rgba(245, 7, 146, 0.5) inset, 0 0 20px rgba(0, 0, 0, .8); border-radius: 50%; } .three div:nth-of-type(4) { box-shadow: 0 0 5px 10px rgba(245, 188, 1, 0.5) inset, 0 0 35px rgba(0, 0, 0, .8); border-radius: 50%; } .three div:nth-of-type(5) { box-shadow: 0 0 5px 10px rgba(252, 116, 5, 0.5) inset, 0 0 50px rgba(0, 0, 0, .8); border-radius: 50%; }
效果4 折角效果
代码如下：
ul.four {
list-style: none;
text-align: center;
font-size: 0;
}
ul.four li {
display: inline-block;
margin: 30px;
480px;
height: 310px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.four li div {
100%;
height: 100%;
overflow: hidden;
}
ul.four li::after,
ul.four li::before,
ul.four li div::after,
ul.four li div::before {
content: "";
position: absolute;
120px;
height: 40px;
background: rgb(130, 213, 236);
box-shadow: 0 4px 3px -3px rgba(0, 0, 0, .3);
}
ul.four li::after {
right: -60px;
bottom: -25px;
transform: rotate(135deg);
}
ul.four li::before {
right: -60px;
top: -20px;
transform: rotate(45deg);
}
ul.four li div::after {
left: -60px;
bottom: -25px;
transform: rotate(-135deg);
}
ul.four li div::before {
left: -60px;
top: -20px;
transform: rotate(-45deg);
}
效果5 外翘边效果
代码如下：
ul.five {
list-style: none;
text-align: center;
font-size: 0;
display: flex;
}
ul.five li {
display: inline-block;
margin: 30px;
500px;
height: 340px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.five li::after,
ul.five li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: 1%;
right: 1%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
}
ul.five li::after {
transform: skew(0, -5deg);
}
ul.five li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%)
}
效果6 内翘边效果
代码如下：
ul.six {
list-style: none;
text-align: center;
font-size: 0;
}
ul.six li {
display: inline-block;
margin: 30px;
480px;
height: 312px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
border-radius: 0 0 120px 120px / 0 0 30px 30px;
}
ul.six li::after,
ul.six li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: .5%;
right: .5%;
box-shadow: 0 20px 15px rgba(0, 0, 0, .6);
transform: skew(0, 5deg);
border-radius: 40%;
}
ul.six li::after {
transform: skew(0, -5deg);
}
ul.six li div {
100%;
height: 100%;
overflow: hidden;
border-radius: 0 0 120px 120px / 0 0 25px 25px;
position: relative;
}
ul.six li span {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:
linear-gradient(to top right, rgba(0, 0, 0, .5), transparent 15%),
linear-gradient(to top left, rgba(0, 0, 0, .5), transparent 15%);
}
效果7 曲边特效
代码如下：
ul.seven {
list-style: none;
text-align: center;
font-size: 0;
}
ul.seven li {
display: inline-block;
margin: 30px;
500px;
height: 330px;
border: 10px white solid;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
position: relative;
background: white;
}
ul.seven li::after {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 0;
left: 5%;
right: 5%;
box-shadow: 0 20px 20px rgba(0, 0, 0, .6);
border-radius: 50%;
}
总结
最后总结一下box-shadow的具体用法：
格式：
box-shadow: 阴影类型 X轴偏移量 Y轴偏移量 阴影边缘模糊 阴影扩展半径 阴影色彩
- 阴影类型：包括内阴影和外阴影，默认是外阴影，可以设置
inset即可表示内阴影 X轴偏移量和Y轴偏移量：必填，用于表示阴影的位置，设置的值可正可负- 阴影边缘模糊 ：默认为
0，表示不模糊，模糊效果从阴影边缘向外扩展，只能是正值，模糊值越大，模糊的面积就越大，整体的阴影面积也会变大。 - 阴影扩展半径：即阴影大小，默认为
0（不扩展），可以设置正负值，正值阴影延展扩大，负值阴影缩小。 - 阴影色彩：默认值为
currentcolor
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。