box-shadow单边阴影

我们写 css 的时候经常会用到 box-shadow 这个属性，这个属性是盒子阴影，但是因为阴影扩散的原因，经常是四周都出现阴影（如下所示），然后我们如果要只有一边有阴影的效果应该怎么做呢？

<!-- log -->
<style>
  #shadow {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    box-shadow: 10px 0px 5px black;
  }
</style>
<div id="shadow"></div>

考虑 box-shadow 各位置参数的含义

其中阴影大小可以为负值，意思是减少指定数值的阴影半径，则只需要让第四个数值为负即可。

<!-- log-after -->
<style>
  #shadow-oneside {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    box-shadow: 10px 0px 5px -5px black; /* 第四个数值为负 */
  }
</style>
<div id="shadow-oneside"></div>

box-shadow单边阴影

原文：https://www.cnblogs.com/oceans/p/13713026.html