title: CSS视觉效果
date: 2016-12-17
tags: CSS Secrets
0x00 投影的绘画机制
当为一个元素添加 box-shadow
时,我们便会从视觉上得到一个投影的效果。
比如:
#box{
width: 100px;
height: 100px;
background: deeppink;
box-shadow: 5px 6px 4px rgba(0,0,0,0.5);
}
我们对 div#box
添加了 box-shadow
属性,并指定了三个长度值和一个颜色值。对于这样的用法,我们再熟悉不过了。要得到上图的效果,浏览器渲染引擎其实进行了四步:
以该元素相同的位置和尺寸,画一个
rgba(0,0,0,0.5)
的矩形。把它向右偏移
5px
,向下偏移6px
。使用高斯模糊算法对其进行
4px
的模糊处理。模糊后的矩形与原始元素的交集部分会被裁切掉。
所以,从投影绘制的机制来看,绘制的投影其实是在元素的上层的。
单侧投影
box-shadow
鲜为人知的第四个参数,称为 _扩张半径_。这个参数会根据指定的值去扩大(当指定负值时)或缩小投影的尺寸。比如,一个 -5px
的扩张半径会把投影的宽度和高度各减少 10px
(即每边各 5px
)。
那么,当应用一个负的扩张半径,而它的值刚好等于模糊半径,那么投影的尺寸就会与投影所属元素的尺寸一致,如果不使用偏移参数来移动它,将看不见任何投影。
这正是我们想要的。
box-shadow: 0px 5px 4px -4px black;
我们给了投影一个正的垂直偏移量,而在另外三侧是没有投影的。
双侧投影
目前为止,还无法指定投影在水平方向上放大,而在垂直方向上缩小,要实现双侧投影的效果唯一的办法就是使用两块投影来达到目的。
box-shadow: 6px 0px 5px -4px yellow,
-6px 0px 5px -4px green;
未完待续。。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。