CSS（非）实用技巧——背景与边框

参考

《CSS揭秘》（《CSS Secrets》）

背景

CSS3

尽管“CSS3”这个名词非常流行，但它严格意义上并不是一个规范。因为在CSS2之后，CSS这门语言已经庞大到无法放进单个规范中了，CSS工作组将其分成不同的模块。

其中在CSS2.1已有基础上发展的模块升级到了3这个版本，如：

• CSS 语法(http://w3.org/TR/css-syntax-3)
• CSS 层叠与继承(http://w3.org/TR/css-cascade-3)
• CSS 颜色(http://w3.org/TR/css3-color)
• 选择符(http://w3.org/TR/selectors)
• CSS 背景与边框(http://w3.org/TR/css3-background)
• CSS 值与单位(http://w3.org/TR/css-values-3)
• CSS 文本排版(http://w3.org/TR/css-text-3)
• CSS 文本装饰效果(http://w3.org/TR/css-text-decor-3)
• CSS 字体(http://w3.org/TR/css3-fonts)
• CSS 基本 UI 特性(http://w3.org/TR/css3-ui)

此外，还有新增的一部分模块，其版本号从1开始，如：

• CSS 变形(http://w3.org/TR/css-transforms-1)
• 图像混合效果(http://w3.org/TR/compositing-1)
• 滤镜效果(http://w3.org/TR/filter-effects-1)
• CSS 遮罩(http://w3.org/TR/css-masking-1)
• CSS 伸缩盒布局(http://w3.org/TR/css-flexbox-1)
• CSS 网格布局(http://w3.org/TR/css-grid-1)

所以，CSS3实际上是一个非正式的集合，它包括 CSS 规范第三版(Level 3)再加上一些版本号还是 1 的新规范。

半透明边框

问题

从CSS2.1中可知，默认状态下 background 会延伸到 border 的下面。

background-color: rgba(95, 158, 160, 1);
border: rgba(210, 105, 30, 0.5) dashed 10px;

background-clip 方案

如图，即使 border 用 rgba 或者 hsla 设置为半透明，也只能看到所在容器的背景。如果想看到父容器的背景，我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着背景会覆盖 border box。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

background-color: rgba(95, 158, 160, 1);
border: rgba(210, 105, 30, 0.5) solid 10px;
background-clip: padding-box;

 

box-shadow 方案

使用 box-shadow 可以实现同上面同样的效果，box-shadow 还接受第四个参数(称作“扩张半径”)，通 过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。

唯一与 border 不同的是，box-shadow 不会影响布局，可以通过外边距来实现布局的一致性。

background-color: rgba(95, 158, 160, 1);
box-shadow:0 0 0 10px rgba(255, 255, 255,