基础用法
基础投影 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
浅色投影 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
深色投影 box-shadow: 0 2px 8px rgba(0,0,0,0.2)
曲线投影
<div class="box box-curve"></div>.box{
width: 400px;
height: 150px;
}
.box-curve{
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
background: #fff;
&::after, &::before{
z-index: -1;
content: '';
position: absolute;
top: 50%;
bottom: 0px;
left: 20px;
right: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
border-radius: 100px/10px;
}
}
显示代码
翘边投影
<div class="box box-sharp-edge"></div>.box{
width: 400px;
height: 150px;
}
.box-sharp-edge {
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
background: #fff;
&::after{
z-index: -1;
content: '';
position: absolute;
background: transparent;
top: 50%;
bottom: 12px;
left: 10px;
right: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transform: skew(12deg) rotate(4deg)
}
&::before{
z-index: -1;
content: '';
position: absolute;
background: transparent;
top: 50%;
bottom: 12px;
left: 10px;
right: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transform: skew(-12deg) rotate(-4deg)
}
}
显示代码
3D内嵌感
.box {
border: 1px solid #8f9092;
box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
0 -6px 4px #fefefe, inset 0 0 3px 0 #cecfd1;
background-image: linear-gradient(
to top,
#d8d9db 0%,
#fff 80%,
#fdfdfd 100%
);
}
显示代码