《CSS揭秘》读书总结:背景与边框

fecoding 2019-03-29

前言:
本系列是阅读《CSS揭秘》所作的总结,用以提高知识吸收程度。同时该书本身便是以解决 47 个 CSS 技巧而进行组织的,总结归纳后方便日后查找。

1. 半透明边框

难题

在 CSS 中使用半透明颜色,可以使用 rgba() 和 hsla()。

HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL颜色值指定:HSL(色调,饱和度,明度)。
色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。
指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

尽管半透明颜色很受欢迎,但人们对其使用更多集中于背景上。

假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:

border: 10px solid hsla(0,0%,100%,.5); 
background : white;

结果如下,边框不见了:

《CSS揭秘》读书总结:背景与边框

解决方案

默认状态下,背景会延伸到边框的区域下层,结合下面绿色背景虚线边框的图比较好理解:

《CSS揭秘》读书总结:背景与边框

这就可以解释我们遇到的难题:body 的背景并没有从内部 content 的半透明的白色半透明边框处透上来,而是在半透明白色边框处透出了这个容器自己的纯白实色背景,这实际上得到的效果跟纯白实色的边框看起来完全一样。

如果要解决这个问题,可以使用 CSS 3 中的 background-clip 属性来进行调整。该属性初始值为 border-box,意味着背景会被元素的 border box(边框的外沿框)裁切掉,如果设置为 padding-box,这样浏览器就会用内边距的外沿来把背景裁切掉。

我们修改代码如下:

border: 10px solid hsla(0,0%,100%,.5); 
background : white; 
background-clip : padding-box;

效果如下:

《CSS揭秘》读书总结:背景与边框

2.多重边框

难题

多重边框的实现很长时间内都需要各种丑陋的 hack,比如使用多个元素来模拟多重边框。在 CSS 代码层面对多重边框进行灵活的调整看起来非常困难。

解决方案

  1. box-shadow 方案

    box-shadow 可以接受 6 个参数,如下表所示:

    《CSS揭秘》读书总结:背景与边框

    当我们将 spread 属性设为正值,h-shadow、v-shadow 和 blur 均设置为 0,得到的“投影”就像一道实线边框:

    background : yellowgreen; 
    box-shadow : 0 0 0 10px #655;

    效果如下:

    《CSS揭秘》读书总结:背景与边框

    使用 border 也可以实现同样的效果,但 box-shadow 的优势在于:它支持逗号分隔语法,这意味着其可以创建任意数量的投影,所以也就可以创建任意数量的边框。这里在上面的基础上添加一道边框:

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

    效果如下:

    《CSS揭秘》读书总结:背景与边框

    有一处需要注意,box-shadow 是层层叠加的,因此需要按此规律调整 spread 值。比如,上面第一层边框的 spread 值为 10 px,则宽度为 10 px;如果第二层边框的宽度需要设置为 5px,则第二个 box-shadow 的spread 值需要设置为 (10 + 5)即 15 px。

    注:

    • 投影的行为跟边框不完全一致,因为它不会影响布局,而且也不会受到 box-sizing 属性的影响。如有需要,可以通过内边距或外边距(这取决于投影是内嵌还是外扩的)来额外模拟出边框所需要占据的空间。
    • 使用 box-shadow 创建的边框,其不会响应鼠标事件, 比如悬停或点击。如果需要使其响应鼠标事件,则可以添加 inset 关键字,使得 box-shadow 创建的边框出现在内圈,然后留出额外的内边距来填补这些空隙。
  2. outline 方案

    此方案适用于只创建两层边框的情况。第一层边框使用 border 属性创建,第二层边框使用 outline 属性创建。该方案非常灵活。先看一下 outline 属性可以接受的参数:

    《CSS揭秘》读书总结:背景与边框

    对于上面用 box-shadow 实现的两层边框,用 outline 实现的方式如下:

    background : yellowgreen; 
    border : 10px solid #655; 
    outline : 5px solid deeppink;

    outline 可以和 outline-offset 配合使用,后者用来控制 outline 和元素边缘之间的距离,该属性可以接受负值,对一层 dashed (虚线)outline 使用负的 outline-offset 后,可以得到简单的缝边效果:

    《CSS揭秘》读书总结:背景与边框

    注:

    • outline 只适用于双层边框
    • outline 边框不一定会贴合 border-radius 属性产生的圆角。这种行为被 CSS 工作组认为是一个 bug,因此未来可能会改为贴合 border- radius 圆角。

3. 灵活的背景定位

难题

要求针对容器某个角对背景图片做偏移定位,如右下角。在 CSS 2.1 中,只能指定距离左上角的偏移量,或者靠齐到其他三个角。但是如果希望图片和容器的边角之间能留出一定的空隙,此时便比较难解决。

解决方案

  1. 传统方法

    • 对于固定尺寸的容器,可以基于它自身的尺寸以及我们期望它距离右下角的偏移量,计 算出背景图片距离左上角的偏移量,然后再把计算结果设置给 background- position 。
    • 对于尺寸不固定的容器,上述方案无效。
  2. background-position 的扩展语法方案

    background-position 在 CSS 3 中得到扩展,其允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前指定关键字,比如:

    background : url(code-pirate.svg) no-repeat #58a; 
    background-position : right 20px bottom 10px;

    以上代码表示让背景图片跟右边缘保持 20 px 的偏移量,同时跟底边保持 10px 的偏移量。

    对于不支持 background-position 扩展的浏览器,应该为其提供回退方案,在 background 中指定老式的 right bottom 简写值:

    background : url(code-pirate.svg) no-repeat bottom right #58a; 
    background-position : right 20px bottom 10px;
  3. background-origin 方案

    对于 background-position: top left 这样的代码,这里的 top left 是相对于元素的 padding box 的左上角。现在我们使用 CSS 3 新增的 background-origin 属性可以指定矩形框是 content-box、padding-box 还是 border-box。比如:

    padding: 10px; 
    background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
    background-origin: content-box ;

    当设置 background-origin 为 content-box 时,background-position 属性中使用的边角关键字将会以内容区的边缘作为基准(也就是说,此时背景图片距离边角的偏移量就跟内边距保持一致了)。

  4. calc() 方案

    直接上代码:

    background : url("code-pirate.svg") no-repeat; 
    background-position : calc(100% - 20px) calc(100% - 10px);

    以上代码的效果也是让背景图片跟右边缘保持 20 px 的偏移量,同时跟底边保持 10px 的偏移量。

    注:在 calc() 函数内部的 - 和 + 运算符的两侧各加 一个空白符,否则会产生解析错误。此举是为了向前兼容: 未来,在 calc() 内部可能会允许使用关键字, 而这些关键字可能会包含连字符(即减号)。

4. 边框内圆角

难题

有时我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外 部仍然保持直角的形状,如下图所示:

《CSS揭秘》读书总结:背景与边框

使用两个元素可以实现上述效果,并且很简单:

<div class="something-meaningful"> 
	<div> I have a nice subtle inner rounding, don't I look pretty? </div>
</div>
.something-meaningful { background : #655; padding : .8em; }

.something-meaningful > div { background : tan; border-radius : .8em; padding : 1em; }

但是如果要求用一个元素实现呢?

解决方案

background : tan; 
border-radius : .8em; 
padding: 1em; 
box-shadow : 0 0 0 .6em #655; 
outline : .6em solid #655;

其效果和上面两个元素实现的效果一样。究其原因,正如多重边框一节对 outline 属性介绍时提到的,其并不会贴合 border-radius 属性产生的圆角,但是 box-shadow 会。二者叠加到一起,box-shadow 会刚好填补描边和容器圆角之间的空隙。以下两张图分别是单独使用 outline 和 box-shadow 属性的效果:

《CSS揭秘》读书总结:背景与边框

《CSS揭秘》读书总结:背景与边框

我们为 box-shadow 属性指定的扩张值并不一定等于描边的宽度,我们只需要指定一个足够填补“空隙”的扩张值就可以了。这个值具体是多少?看下图:

《CSS揭秘》读书总结:背景与边框

当圆角半径为 r 时,从圆角的圆心到描边顶角的长度就是 r√2,这意味着投影的扩张半径 spread 值不能小于 r√2 - r = (√2 - 1)r。同时,该值还需要比描边的宽度值小。

5. 条纹背景

难题

目前在网页中实现条纹图案的方式非常繁琐,并且效果往往不够理想。

解决方案

  1. 水平条纹

    使用 linear-gradient 属性可以创建基本的垂直渐变,比如:

    <!--下图一-->
    background : linear-gradient(#fb3, #58a);
    
    <!--下图二-->
    background : linear-gradient(#fb3 20%, #58a 80%);
    
    <!--下图三-->
    background : linear-gradient(#fb3 40%, #58a 60%);

    对应效果:

    《CSS揭秘》读书总结:背景与边框

    《CSS揭秘》读书总结:背景与边框

    《CSS揭秘》读书总结:背景与边框

    可以发现,当拉近两个色标时,渐变区域越来越窄。不难想象,如果把两个色标重合在一起,得到的就是两条水平条纹。以下是理论依据:

    “如果多个色标具有相同的位置,它们会产生一个无限小的过渡区域, 过渡的起止色分别是第一个和最后一个指定值。从效果上看,颜色会在那 个位置突然变化,而不是一个平滑的渐变过程。”

    ——CSS 图像(第三版)(http://w3.org/TR/css3-images)

    background : linear-gradient(#fb3 50%, #58a 50%);

    对应效果:

    《CSS揭秘》读书总结:背景与边框

    在此基础上,我们可以进行一些再加工:

    <!--可以通过background-size来调整尺寸-->
    <!--背景默认重复平铺,所以整个容器被两条条纹填满-->
    <!--如下图一-->
    background : linear-gradient(#fb3 50%, #58a 50%); 
    background-size : 100% 30px;
    
    <!--还可以用相同的方法来创建不等宽的条纹,只需调整色标的位置值即可-->
    <!--如下图二-->
    background : linear-gradient(#fb3 30%, #58a 30%); 
    background-size : 100% 30px;

    《CSS揭秘》读书总结:背景与边框

    《CSS揭秘》读书总结:背景与边框

    针对上面的代码,还可以有改进方案,理论依据如下:

    “如果某个色标的位置值比整个列表中在它之前的色标的位置值都要 小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

    ——CSS 图像(第三版)(http://w3.org/TR/css3-images)

    所以,如果我们把第二个色标的位置值设置为 0,那它的位置就总是会被浏览器调整为前一个色标的位置值。我们可以把原先这样的代码

    background : linear-gradient(#fb3 30%, #58a 30%);

    改写成这样:

    background : linear-gradient(#fb3 30%, #58a 0);

    如果要创建超过两条颜色的条纹,也很容易。以下是生成三条条纹的代码:

    background : linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0); 
    background-size : 100% 45px;

  2. 垂直条纹

    垂直条纹相比水平条纹,在 linear-gradient 的开头加一个额外参数来标记其渐变方向即可(在水平条纹中我们没有加这个参数,因为其默认值就是 to bottom,也就是水平条纹的效果):

    background : linear-gradient(to right, /* 或 90deg */ 
    #fb3 50%, #58a 0); 
    background-size : 30px 100%;

    还需要把 background-size 的值颠倒。

  3. 斜向条纹

    如果按照常规思维,要实现斜向条纹,改变 linear-gradient 的方向和 background-size 的值,貌似就可以搞定。如果要实现一个 45° 的条纹图案,代码这样写:

    background: linear-gradient(45deg,#fb3 50%, #58a 0);
    background-size : 30px 30px;

    得到的效果却是:

    《CSS揭秘》读书总结:背景与边框

    失败的原因是我们仅仅把每个背景单元作了渐变旋转,而没有站在背景整体的角度来看问题。来看预想的斜向背景的单个背景单元:

    《CSS揭秘》读书总结:背景与边框

    可以看到,在一个背景单元里,实际上有四条条纹,这样就可以实现条纹无缝衔接:

    background : linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size : 30px 30px;

    关于条纹变成斜向后为何会看起来变瘦了,实际上是因为背景尺寸设置为 30px 时,产生的条纹宽度将是15/√2 ≈ 10.606 像素。如果需要和原先水平或垂直条纹一样的宽度,在其基础上乘以 √2 即可。

  4. 更好的斜向条纹

    上面的方案在我们想调整斜向角度时会非常不灵活。这里提供一个更好的方案。首先需要了解的是 linear-gradient() 和 radial-gradient() 各还有一个循环式的加强版:repeating-linear-gradient() 和 repeating-radial-gradient()。其工作方式和前两者类似,只有一点不同:色标是无限循环重复的,直到填满整个背景。比如以下代码:

    background : repeating-linear-gradient(45deg, #fb3, #58a 30px);

    其实相当于:

    background: linear-gradient(45deg, #fb3, #58a 30px, #fb3 30px, #58a 60px, #fb3 60px, #58a 90px, #fb3 90px, #58a 120px, #fb3 120px, #58a 150px, ...);

    效果图如下:

    《CSS揭秘》读书总结:背景与边框

    第一个好处就是减少了重复,改动颜色时只需要修改两处。另外一点就是现在是在渐变的色标中指定长度,而不是原来的 background-size。因为这些长度是直接在渐变轴上进行度量的,直接代表了条 纹自身的宽度。所以再也不用进行各种数学计算了。

    当需要改变角度为 60° 时,只需要这样:

    background : repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
    1. 灵活的同色系条纹

    当条纹图案由差异不大的颜色组成时,按照上面提供的方法,我们可能需要这样写 CSS:

    background : repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

    如图:

    《CSS揭秘》读书总结:背景与边框

    实际上,在应对这种情况时,我们可以把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹:

    background : #58a; 
    background-image : repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1)    15px, transparent 0, transparent 30px);

6. 复杂的背景图案

7. 伪随机背景

8. 连续的图像边框

请支持正版,购买书籍自行查看。

好吧,其实是我觉得这三章内容 focus 的点太小了,感觉了解一下即可。

好吧,其实是我懒得截图整理了,加上确实 focus 的点太小了,所以就偷个懒啦。

相关推荐