CSS学习 | 《CSS揭秘》读书笔记——第二章

第二章 背景与边框

1. 半透明边框

使用rgba()和hsla()都可以实现半透明颜色。大部分使用在背景上，而在边框上使用会有一些复杂。
默认情况下，背景会延伸到边框所在的区域下层。
还好在背景与边框（第三版）中，我们可以通过background-clip属性来调整上述行为所带来的不便。
这个属性的初始值是border-box，意味着背景会被元素的border box（边框的外沿框）裁减掉。
如果不希望背景侵入边框所在的范围，我们就要把它的值设为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

2.多重边框

box-shadow方案

box-shadow接受第四个参数（称做“扩张半径”），通过指定正值或负值，可以让投影面积加大或减小。
一个正值的扩张半径加上两个为0的偏移量以及为0的模糊值，得到的“投影”就像是一道实线边框。并且它支持逗号分隔语法，可以创建任意数量的投影，这些投影层层叠加，第一层投影位于最顶层。
注意⚠️：

1. 投影的行为和边框不完全一致，它不影响布局，不受到box-sizing属性的影响。可以通过内边距或外边距来模拟占据的空间。
2. 投影在元素的外圈并不会影响鼠标事件，比如悬停或点击。可以给box-shadow属性加上inset关键字，来使投影绘制在元素的内圈，同时需要增加额外的内边距来腾出足够的空隙。

outline方案

当只需要两层边框就可以使用outline（描边）属性来产生外层的边框。它的优点就在于灵活，而box-shadow只能模拟实线边框。而且可以通过outline-offset属性来控制它跟元素边缘的间距。
注意⚠️：

1. 只适用于双层边框的场景。
2. 边框不一定会贴合border-radius属性产生的圆角。

3.灵活的背景定位

很多时候，我们想针对容器某个角对背景图片做偏移定位，如右下角。在CSS2.1中，我们只能指定距离左上角的偏移量，或干脆完全靠齐到其他三个角，而我们有时希望图片和容器的边角之间能留出一定的间隙。

background-position的扩展语法方案

在CSS背景与边框（第三版）中，background-position属性已经得到了扩展，允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。