Maison > Article > interface Web > CSS秘密花园:单面阴影_html/css_WEB-ITnose
《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。
在Q&A网站上,我看到的关于 box-shadow 被问得最多的问题是,阴影如何只应用于物体的单侧(或双侧,问得比较少)。在 stackoverflow.com 上快速搜索,也能找到将近一千个结果。这是可以理解的,因为单侧阴影能呈现出一个比较细微的、但同样效果逼真的阴影效果。通常情况下,纠结于阴影效果的开发人员甚至会给CSS工作小组发邮件,请求希望能够有新的像 box-shadow-bottom 这样的属性,来方便他们的开发。但是,这样的效果完全可以通过巧妙地使用我们已经学习并深深喜爱着的 box-shadow 属性来完成。
大多数人使用 box-shadow 时,都是用三个长度值和一个颜色值作为参数,如下:
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
下面的步骤是一组很好的(尽管技术上并不完全精确)展示这些阴影绘制过程的方法:
除非有特别说明,这里的元素尺寸指的是它的 border 盒子的尺寸,不是它的CSS width 和 height 。
使用 4px 的模糊半径是指:阴影的尺寸比我们的元素的尺寸约大 4px ,这样在元素的每一侧都会有部分阴影显示。我们可以改变偏移量来隐藏左侧和顶部的阴影,通过把偏移量增加至少 4px 。但是这会导致出现一个太显影的阴影,看起来就不好看了。还有,尽管这不是什么大问题,但是还记得不?我们想要的阴影是只在一个侧面的,不是两个侧面。
尝试将偏移量的值设置和模糊半径的值相等,将顶部和左侧的阴影隐藏。
准确地说,我们会在顶部看到一个 1px ( 4px - 3px )的阴影,在左侧看到一个 2px ( 4px - 2px )的阴影,右侧是 6px ( 4px + 2px ),底部是 7px ( 4px + 3px )。在实际中,看起来会更小,因为边缘的颜色过渡不是直接直线分开的,而是梯度的变化。
解决方法是鲜为人知的第四个长度参数,在模糊半径(blur radius)后边指定,也就是所谓的扩散半径(spread radius)。扩散半径能够按照你指定的数字,增加或减少(值为负数)阴影的大小。比如说,一个 -5px 的扩散半径能把阴影的 width 和 height 减少 10px (每一边 5px )。
它的逻辑是,如果我们应用一个负数的扩散半径,但是绝对值和模糊半径相等,那么阴影会和它应用的元素有完全相同的尺寸。除非我们使用偏移量(前两个长度参数)来移动它,否则我们就看不见它啦(被元素正好挡在身后)。因此,如果我们施加垂直方向的正向偏移,我们只会在元素底部看到阴影,其它侧面都没有,这正是我们想要的效果:
box-shadow: 0 5px 4px -4px black;
你可以在下图中看到效果:
另一个常见的问题是,把阴影应用到两侧。如果两侧是相邻的(比如说,右侧和底部),那就比较容易实现了:你可以做一个像下图那样的效果:
也可以应用上一节中讨论的一些技巧,但有以下一些不同之处:
比如说,这是我们为右侧和底部应用一个 black 6px 阴影的代码:
box-shadow: 3px 3px 6px -3px black;
你可以在下图中看到效果。
如果我们想要在两个相对侧的阴影就比较麻烦了,比如说左侧和右侧。因为扩散半径应用在所有方向都是等同的(如,没有办法可以直接帮我们完成阴影在水平方向的延伸、垂直方向的收缩的话),我们的唯一办法就是使用两个阴影,一侧一个阴影。然后,我们基本上就可以采用前面介绍的“单侧阴影”一节的方法来完成,应用两次即可:
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
你可以在下图中看到效果:
对侧阴影 box-shadow
在CSS工作小组有关于分开水平/垂直扩散半径值的讨论,所以将来可能会更简单一些。