《CSS揭秘》读书笔记--背景与边框

516 阅读10分钟

一. 半透明边框

默认状态下,背景会延申到边框区域的下层。半透明的边框,并不能让body的背景从半透明边框处透上来,而是透出了容器自己的背景。如图所示:

image.png

解决方案

background-clip属性可以设置背景绘制的区域,属性值如下:

  • border-box 背景绘制到边框(默认值)
  • padding-box 背景绘制到内边距
  • content-box 背景绘制到内容框 将background-clip属性设置为padding-box可以实现半透明边框。 image.png

二. 多重边框

1. box-shadow方案

box-shadow语法

  • box-shadow: h-shadow v-shadow blur spread color inset;
  • h-shadow: 必需的。水平阴影的位置。允许负值
  • v-shadow: 必需的。垂直阴影的位置。允许负值
  • blur: 可选。模糊距离
  • spread: 可选。阴影的大小
  • color: 可选。阴影的颜色
  • inset: 从外层的阴影(开始时)改变阴影内侧阴影

box-shadow第四个参数,扩张半径,通过指定正值或者负值,可以让投影面积加大或减小。一个正值的扩张半径加上两个为0的偏移量以及为0的模糊值,得到的投影就像一道实线边框。如图所示:

image.png

box-shadow支持逗号分隔语法,可以创建任意数量的投影。box-shadow是层层叠加的,第一层投影位于最顶层,以次类推。因此需要根据此规律调整扩张半径。比如我们想在前面代码中再加一个10px的边框,就需要为此扩张半径设置为20px(10px + 10px)。

image.png

box-shadow不会影响布局,也不会受到box-sizing属性的影响,可以通过设置内边距或外边距来模拟出边框所占据的空间。

由于假“边框”出现在元素的外圈,不会响应鼠标事件,可以给box-shadow属性加上inset关键字,将投影绘制在元素的内圈。

2. outline方案

outline语法

outline (轮廓)是绘制元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 可以按顺序设置轮廓颜色、轮廓样式、轮廓宽度。

  • outline-color 轮廓颜色
  • outline-style 轮廓样式
  • outline-width 轮廓宽度 还有一个outline-offset属性,设置轮廓的偏移,该属性要单独使用。

在某些情况下,你需要设置两层边框,那就可以先设置一层常规边框,再加上outline描边属性来产生外边框。如图所示。

image.png image.png

注意:

  • 该方案只适用两层边框的场景;
  • 如果元素是圆角的,描边也是圆角(书出中内容写的是直角,现在css已经改为贴合border-radius的圆角。如果outline-off设置为负值,将在元素的内部描边,描边贴合内部,因此会是直角。如上图的白色虚线描边。);

三. 灵活的背景定位

1. background-position方案

background-position 为每一个背景图片设置初始位置。语法如下:

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

background-position属性允许我们指定背景图片距离任意角的偏移量。只要我们在偏移量前指定关键字。下图,将背景图片定位到了右下角10px的偏移处。

image.png

2. background-origin方案

background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域。

background-origin语法:

background-origin: border-box//背景图片的摆放以border区域为参考
background-origin: padding-box//背景图片的摆放以padding区域为参考
background-origin: content-box//背景图片的摆放以content区域为参考

当背景的偏移量与容器的内边距一致。可以使用background-origin方案。

image.png

3. calc()方案

把背景图片固定到底边10px且距离右边20px,以左上角偏移的思路来考虑,我们期望图片水平偏移100% - 20px,垂直偏移100%- 10px; calc()函数允许我们执行计算。

image.png

三. 边框内圆角

圆角边框,书上写得是box-shadow和outline组合,但是outline已经优化为描边紧贴元素。当元素设置了box-raduis时,outline也是圆角。因此书上的方案无法实现边框圆内角。

下面是用了两个div通过border和outline实现的边框内圆角。 image.png

四. 条纹背景

1. css线性渐变

CSS linear-gradient()  函数用于创建一个表示两种或多种颜色线性渐变的图片。 语法

  • <side-or-corner>描述渐变线的起始点位置,它包含to和两个关键词:第一个指出水平位置left or right,第二个指出垂直位置top or bottom。关键词的先后顺序无影响,且都是可选的
  • <angle>用角度值指定渐变的方向(或角度)。角度顺时针增加。
  • <linear-color-stop>由一个<color>值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<length>)
  • <color-hint> 颜色中转点是一个插值提示,它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。

具有多个颜色停止的渐变

  • 如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。
  • 如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。
  • 如果一个既不是起始也不是终止的颜色中间点,没有被明确声明位置,那么这个颜色就会从前后两个颜色的中间位置开始。

background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。单张图片的背景大小可以使用以下三种方法中的一种来规定:

  •  contain缩放背景图片以完全装入背景区,可能背景区部分空白
  •  cover表示缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
  • 设定宽度和高度值,可以提供一或者两个数值: 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为auto。如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

2. 水平条纹

  • 如果两个色标具有相同的位置,那么他们的渐变区间为0,颜色会在那里突然变化,而不是一个平滑的渐变过程。利用这个特点,可以设置条纹效果。
  • 渐变是由代码生成的图像,可以通过调整background-size来调整其尺寸。 image.png 注意:如果我们把第二个色标设置为0,那它的位置就总是被浏览器调整为前一个色标的位置值,这样效果总是从一个颜色跳到另一个颜色。下图中,linear-gradient(yellow 25%, blue 0, blue 50%, deeppink 0, deeppink 75%, black 0);等价与linear-gradient(yellow 25%, blue 25%, blue 50%, deeppink 50%, deeppink 75%, black 75%);

image.png

3. 垂直条纹

渐变方向默认是to bottom,将渐变方向改为to right即可实现垂直条纹。background-size水平方向设置为30%,垂直方向设置为100% image.png

4. 斜向条纹

构造斜条纹分解为三步

  1. 构造一个四条水平条纹。
background-image: linear-gradient(deeppink 25%, blue 0, blue 50%, deeppink 0, deeppink 75%, blue 0);

image.png

  1. 将水平条纹倾斜45度
background-image: linear-gradient(45deg, deeppink 25%, blue 0, blue 50%, deeppink 0, deeppink 75%, blue 0);

image.png

  1. 将背景图片缩小并平铺即可。
background-size: 20px 20px;
background-repeat: repeat;

image.png 注:如果想要构造固定宽度的条纹,要根据勾股定理计算出平铺方块的大小。本例中的条纹宽度为5√2px;

5. 更好的斜向条纹

如果我们想要创建更多角度的斜向条纹,可以使用repeating-linear-gradient(),色标无限循环重复,直到填满整个背景。

image.png

image.png

6. 灵活的同色系条纹

通过使用半透明白色的条纹叠加在背景色之上,来得到浅色条纹。这样的好处是,只需要修改一个地方就可以改变所有颜色,同时这里的背景色还起到回退的作用。

image.png

五. 复杂的背景

把多个渐变图案组合起来,可以得到复杂的背景

1. 网格

image.png

2. 斜棋盘

第一步,先构建如下小方块,为了清楚展示,用不同的颜色标识。 image.png 第二步,四种颜色都替换为黑色,并且平铺展示 image.png

3. 水平棋盘

第一步,构造小方块,平铺位置从第一行第二列开始。 image.png 第二步,构造小方块,平铺位置从第二行第一列开始 image.png 第三步,将上面两步构造的背景叠加,颜色都换成黑色。 image.png

4. 波点

image.png

六. 伪随机背景

无限平铺的方式存在的。即使重复也伴随着多样性和随机性。我们可以通过质数来增加随机的真实性。下图中,贴片的尺寸时41*61*83=207583像素

image.png

七. 连续的图片边框

把一张图案应用为边框,而不是背景。你可能第一个想到用border-image。

1. border-image语法

先来学习一下border-image。border-image通过指定一张图片来取代border-style定义的样式,border-image生效的前提是border-style和border-width属性应为有效值。属性border-image的原理是九宫格伸缩法:把图片切成九块,然后把他们应用到元素边框相应的角和边。

border-image 属性是一个简写属性,用于设置以下属性:

  • border-image-source 指定边框图片的路径。
  • border-image-slice 边框图像切片。指定4个值(4条分割线:top, right, bottom, left)将图片分割成9宫格。border-image-slice 四条线的值类型为:number | percentage。number 不带单位的数值。1 代表 1个图片像素。percentage 百分比。

image.png

  • border-image-width 图片边框的宽度。四个角水平和垂直方向等比例缩放;上下两个边垂直方向等比例缩放;左右两个边的水平方向等比例缩放。下图是边框大小是20px,边框图片分别是10px和50px的情况 image.png image.png image.png
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。下图是三个不同属性值的效果。 image.png

图片边框存在的问题是,他会固定四个角,拐角处的图片区域,不会随着元素元素宽高和边框厚度的而变化。

2. 解决方案

在背景图片上,再叠加一层纯白色的试色背景。为了让下层的图片背景透过边框区域显示出来,我们需要给两层背景指定不同的background-clip值。

背景图边框

image.png

老式信封边框

image.png

动态的边框

image.png