css 一侧是三角形的矩形_css揭秘-视觉效果

单侧投影

难题

box-shadow 如何在元素的一侧（偶尔是两侧）设置投影。

单侧投影

大多数人使用 box-shadow 的方法是，指定三个长度值和一个颜色值：

box-shadow: 2px 3px 4px rgba(0,0,0,.5);

box-shadow 的绘制原理：

1. 以该元素相同的尺寸和位置，画一个 rgba(0,0,0,.5) 的矩形；
2. 把它向右移 2px，向下移 3px；
3. 使用模糊算法将它进行 4px 的模糊处理；
4. 将模糊后的矩形与原始元素的交集部分会被切除掉。

使用 4px 的模糊半径意味着投影的尺寸会比元素本身的尺寸大约 8px ，因此投影的最外圈会从元素的四面向外显露出来，只需改变偏移量，就可以把投影的顶部和左侧隐藏起来，只要这两个方向上的偏移量不小于4px 就可以了。但是，这在某种程度上会导致外露的投影太过浓重，看起来不是很美观。另外，就算这个问题勉强可以接受，但跟想要的投影在单侧的不相符。

最终的解决方案来自 box-shadow 的第四个长度参数，排在模糊半径参数的后面，称作扩张半径。这个参数会根据指定的值去扩大（当指定值为负数）缩小投影的尺寸。举例来说：一个 -5px 的扩张半径会把投影的宽度和高度各减少 10px。因此，下面代码即为想要的效果：

box-shadow: 0 5px 4px -4px black;
box-shadow: 5px 0 4px -4px black;
box-shadow: 0 -5px 4px -4px black;
box-shadow: -5px 0 4px -4px black;

下右上左投影的矩形

邻边投影

box-shadow: 2px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 6px -3px black;

两种邻边投影以及双侧投影

双侧投影

因为扩张半径在四个方向上的作用是相等的（即无法指定投影在水平方向上放大，而在垂直方向上缩小），唯一的办法是用两块投影（每边各一块）来达到目的。

box-shadow: 5px 0 5px -5px black,
           -5px 0 5px -5px black;

不规则投影

难题

给一个矩形或者其他能用 border-radius 生成的形状加投影时，box-shadow 的表现都堪称完美。但是当元素添加了一些伪元素或者半透明的装饰后，box-shadow 就有点力不从心了。这类情