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 各位置参数的含义

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

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

<!-- 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>