参考
《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