主题是立体投影。

这个说法很奇怪，阴影的出现，本就是为了让原本的元素看起来更加的立体，那这里所谓的立体投影，是个怎么立体法？

这里所谓的立体投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破 box-shadow 这类元素的一些定位局限。让阴影的位置、大小、模糊度可以更加的灵活。

OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体：

代码非常简单，伪 CSS 代码示意如下：

div {
position: relative;
width: 600px;
height: 100px;
background: hsl(48, 100%, 50%);
border-radius: 20px;
}


div::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 0;
border-radius: 10px;
background: hsl(48, 100%, 20%);
transform: translate(0, -15%) rotate(-4deg);
transform-origin: center center;
box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
}​

总结一下：

• 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作
• 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度

还有其他很多场景，都可以用类似的技巧实现：

<!-- 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作 -->
<!-- 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度 -->


<div class="g-left"></div>
<div class="g-both"></div>
<div class="g-slide"></div>​

div {
position: relative;
width: 600px;
height: 100px;
margin: 5vmin auto 15vmin;
background: hsl(48, 100%, 50%);
border-radius: 20px;
box-shadow: 0 0 5px 2px hsl(48, 100%, 45%);
}


.g-left::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 0;
border-radius: 10px;
background: hsl(48, 100%, 20%);
transform: translate(0, -15%) rotate(-4deg);
transform-origin: center center;
box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
z-index: -1;
}


.g-both {
background: hsl(199, 98%, 48%);
box-shadow: 0 0 5px 2px hsl(199, 98%, 40%);
}


.g-both::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 15%;
border-radius: 10px;
background: hsl(199, 98%, 20%);
transform: translate(0, -20%) rotate(-4deg);
transform-origin: center center;
box-shadow: 0 0 20px 15px hsl(199, 98%, 20%);
z-index: -1;
}


.g-both::after {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 15%;
border-radius: 10px;
background: hsl(199, 98%, 20%);
transform: translate(0, -20%) rotate(4deg);
transform-origin: center center;
box-shadow: 0 0 20px 15px hsl(199, 98%, 20%);
z-index: -1;
}


.g-slide {
background: hsl(150, 62%, 52%);
box-shadow: 0 0 5px 2px hsl(150, 62%, 40%);
}


.g-slide::before {
content: "";
position: absolute;
top: 15%;
bottom: 20%;
left: 90%;
right: 5%;
border-radius: 10px;
background: hsl(150, 62%, 20%);
transform: translate(105%, 10%) rotate(15deg);
transform-origin: center center;
box-shadow: 0 0 10px 7px hsl(150, 62%, 20%);
z-index: -1;
}


.g-slide::after {
content: "";
position: absolute;
top: 15%;
bottom: 20%;
left: 5%;
right: 90%;
border-radius: 10px;
background: hsl(150, 62%, 20%);
transform: translate(-105%, 10%) rotate(-15deg);
transform-origin: center center;
box-shadow: 0 0 10px 7px hsl(150, 62%, 20%);
z-index: -1;
}