[分享]css写-90度的投影

在CSS中，我们可以通过投影效果让元素看起来更加立体化和美观。一种比较特殊的投影效果是90度的投影，也叫做left shadow。具体实现方式如下：.shadow { boxshadow: 10px ...

在CSS中，我们可以通过投影效果让元素看起来更加立体化和美观。一种比较特殊的投影效果是-90度的投影，也叫做left shadow。

具体实现方式如下：

.shadow {
  box-shadow: -10px 0px 10px -10px #000000;
  transform: rotate(-90deg);
} 

代码中，box-shadow用来实现投影效果，-10px表示阴影的水平偏移量，0px表示阴影的垂直偏移量，10px表示阴影的模糊半径，-10px表示阴影的扩展半径，#000000表示阴影的颜色值。transform: rotate(-90deg)用来实现元素的旋转效果，-90deg表示元素被旋转90度。

通过以上样式代码，即可得到一个左侧投影的效果。除了left shadow，我们还可以通过改变box-shadow的偏移量，得到其他方向的投影效果。

总之，投影效果可以让元素变得更加立体化和美观，是CSS样式中不可缺少的一部分。