《HTML权威指南5》CSS学习笔记

Posted 2021-04-04 码农阿焦

3、边框和背景

3.1 应用边框样式

容器的边框常用的关键属性有三个：border-width、border-style和border-color。

3.1.1 定义边框宽度、样式和颜色

• border-color：边框的颜色

border-color的取值包括：十六进制颜色值、RGB颜色、RGBA颜色、HSL颜色、HSLA颜色、预定义/跨浏览器颜色名。

• border-width：边框的宽度

border-width的取值包括：常规的CSS长度值、容器宽度的百分比、CSS3提供的默认快捷值，其中快捷值包括Thin、middle、thick，他们的大小是浏览器定义的并且依次增大。

• border-style：边框的样式

boder-style可选值如下：

值	描述
none	没有边框
dashed	破折线边框
dotted	圆点线边框
double	双线式边框
groove	槽线式边框
inset	使元素内容具有内嵌效果的边框
outset	使元素内容具有外嵌效果的边框
ridge	脊线边框
solid	实线边框

dashed效果：

dotted效果：

double效果：

groove效果：

inset效果

outset效果

ridge效果：

solid效果：

3.1.2 定义一条边框的宽度、样式和颜色

以上内容介绍了应用边框三种属性的设置方法，需要注意的是，这里是使用的border-width、border-style和border-color，这些设置将会对应用的四条边框起作用，如果需要单独设置某条边框，可在border后面添加对应的值，其属性值与通用属性值一样，比如：

属性	说明
border-left-width	定义左侧边框的宽度
border-left-style	定义左侧边框的样式
border-left-color	定义左侧边框的颜色
border-right-width	定义右侧边框的宽度
border-right-style	定义右侧边框的样式
border-right-color	定义右侧边框的颜色
border-top-width	定义上侧边框的宽度
border-top-style	定义上边边框的样式
border-top-color	定义上边边框的宽度
border-bottom-width	定义下边边框的宽度
border-bottom-style	定义下边边框的样式
border-bottom-color	定义下边边框的颜色

3.1.3 使用简写方式定义边框样式

另外，为了方便编写边框样式，CSS3提供了简写border属性的方式，具体如下表：

属性	说明	值
border	设置所有边框的样式	<宽度> <样式> <颜色>
border-left	设置左边边框的样式	<宽度> <样式> <颜色>
border-right	设置右边边框的样式	<宽度> <样式> <颜色>
border-top	设置上边边框的样式	<宽度> <样式> <颜色>
border-bottom	设置下边边框的样式	<宽度> <样式> <颜色>

如果某个值忘了写，浏览器将会使用之前定义的值或者浏览器默认提供的值。

3.1.4 定义圆角边框

定义边框的圆角，可是使用radius属性，与上面一样，也可以单独设置某条边框的边框，如下表：

属性	说明	值
border-radius	为四条边统一设置圆角	一对长度值或者边框宽度、高度的百分数值
border-top-left-radius	为左上设置圆角	一对长度值或者边框宽度、高度的百分数值
border-top-right-radius	为右上设置圆角	一对长度值或者边框宽度、高度的百分数值
border-bottom-right-radius	为右下设置圆角	一对长度值或者边框宽度、高度的百分数值
border-bottom-left-radius	为左下设置圆角	一对长度值或者边框宽度、高度的百分数值

这里的一对值表示为圆角设置水平和垂直方向的半径值，如果只提供一个值，表示水平和垂直半径的值是一样的。

CSS3也提供了border-radius的简写形式：

• border-radius: 15px 20px：表示四条边的圆角的水平半径为15px，垂直半径为20px

• border-radius: 15px 10px 20px 5px 20px 15px 10px 1px：依次表示为边框设置左上、右上、右下、左下设置圆角，例如：左上圆角的水平半径为15px、垂直半径为20px

3.1.5 使用图像作为边框样式

除了使用border-style提供的9中样式外，还可以使用图像作为应用的边框。图像边框常用的属性有5个:

属性	说明	值
border-image-source	设置图像来源	non或者url(<图像地址>)
border-image-slice	设置切分图像的偏移	1~4个长度值或者百分数，受图像的宽度和高度影响
border-image-width	设置图像边框的宽度	1~4个长度值或者百分数或者auto
border-image-outset	设置边框图像想外扩展的部分	1~4个长度值或者百分数
border-image-repeat	设置图像填充边框区域的模式	stretch、repeat和round的一个或两个值
border-image	在一条声明中设置以上所有属性值	和单属性值一致

目前各大浏览器对于boder-image属性支持情况（从caniuse.com网站截取）：

3.1.5.1 切分图像

切分图像是使用图像作为边框的关键步骤，浏览器会基于设置的border-image-slice的值来切分图像，具体的切分方法是：

• 将图像横向切两刀、纵向切两刀，得到一个九宫格的效果

• 九宫格的四个边角（左上、右上、右下、左下）称为“角边框图片”，它不会有任何的拉伸、平铺、重复等展示效果；每条边的图片（上、下、左、右）属于展示效果的作用区，存在拉伸、平铺、重复等效果，这是由border-image-repeat属性值来设定的；九宫格的中间的部分是镂空的

• 切分图的大小是由border-image-slice的值确定的，第一个值表示距离图像顶部的大小、第二值表示距离图形右侧的大小、第三个值表示距离图像底部的大小、第四个值表示距离图像左侧的大小，如下图所示

3.1.5.2 控制切分图重复方式

如上一小节所说，border-image-repeat属性值控制着4条边的展示效果，其可用的属性值如下：

属性值	描述
stretch	拉伸切分图填满整个空间
repeat	平铺切分图铺满整个空间
round	在不截断切分图的情况下，平铺切分图并拉伸以填满整个空间
space	在不截断切分图的情况下，平铺切分图并在图片之前保留一定的间距填满整个空间

border-image-repeat属性值可以有一个值或两个值，一个值表示4条边使用同一种效果，两个值中的前一个表示水平边的效果，后一个值表示垂直边的效果。

3.2 设置元素背景

元素背景相关的属性信息如下：

属性	属性说明	属性值
background-color	设置元素背景颜色，总是在背景图像的下面	<颜色值>
background-image	设置元素背景图像，总是在背景颜色的上面；如果设置多个图像，后面的图像在前面的上面	none或者url(图像地址)
background-repeat	设置元素背景图像的重复方式	后面详细介绍
background-size	设置背景图像的尺寸	后面详细介绍
background-position	设置背景图像的位置	后面详细介绍
background-attachment	设置背景图像是否固定或随页面一起滚动	后面详细介绍
background-clip	设置背景图像裁剪方式	后面详细介绍
background-origin	设置背景图像绘制的起始位置	后面详细介绍
background	简写属性	后面详细介绍

3.2.1 background-repeat的属性值描述

属性值	说明
repeat-x	水平方向平铺图像，图像可能被截断
repeat-y	垂直方向平铺图像，图像可能被截断
repeat	水平和垂直方向同时平铺图像，图像可能被截断
space	水平或垂直方向平铺图像，图像之间有一定的间距，确保图像不会被截断
round	水平或垂直方向平铺图像，但调整图像的大小确保图像不会被截断
no-repeat	禁止平铺图像

3.2.2 设置图像大小

background-size控制图像的大小，其属性值可是长度值（如果有两个，分别表示图像的宽度和高度）、百分比和预定值，预定义值有：

• contain

等比例缩放图像，确保图像始终在容器内部。浏览器判断图像的高度和宽度，选择其中最大值，然后与调整至于容器相应的高度或宽度大小，这个值确保图像始终在容器内部。

• cover

等比例调整图像，使图像至少能够覆盖容器，但很有可能超出容器。浏览器选择图像的高度和宽度的最小值为基准，先让其匹配容器的相应的高度或宽度，对于剩下的一个值进行等比例的缩放，这种情况可能会溢出容器。

• auto

默认值，图像以本身尺寸完全显示。

3.2.3 设置图像背景位置

background-position属性用来设置背景图像的位置，图像不平铺时该属性用的最多。其属性值可以使具体的长度值（background-position: 30px 40px），也可以是预定值：

属性值	描述
top	背景图像定位到容器顶部
bottom	背景图像定位到容器底部
right	背景图像定位到容器右侧
left	背景图像定位到容器左侧
center	背景图像定位到容器中间位置

属性值的第一个值控制水平位置，可以是left、right和center，或者指定的值，如：40px表示距离左侧40个像素；第二个位置用来控制垂直位置，可以是top、bottom、center，或者指定的值，如：30px表示距离顶部30个像素。

3.2.4 设置背景图像的附着方式

background-attachement为具有视窗的元素（比如：textarea和body）设置背景图片的附着方式，用来控制当内容超出元素范围显示滚动条时，背景图片的附着效果。其属性值如下：

属性值	说明
fixed	背景固定到视图上，当内容滚动时背景图片不动
local	背景固定的内容上，当内容滚动时背景图片一起滚动
scroll	默认值，背景固定在元素上，不会跟随内容一起滚动

3.2.5 设置背景图像的开始位置和裁剪样式

background-origin控制着指定背景颜色和背景图像应用的位置；background-clip控制着背景颜色和图像的绘制区域。两者均可取以下3个值：

属性值	说明
border-box	在边框盒子内部绘制背景颜色和背景图像
padding-box	在内边距盒子内部绘制背景颜色和背景图像
content-box	在内容盒子内部绘制背景颜色和背景图像

示例：

p {
    background-origin: border-box;
    background-clip: content-box;
}

上面的示例会告诉浏览器，在边框盒子内部绘制背景，但是在会丢弃内容盒子之外的背景。

3.2.6 使用background简写属性

浏览器支持使用简写的background方式，其各个属性的位置为：

backgroud: <backgroud-color> <background-position> <background-size> <background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>

示例：

p {
    border: 10px double black;
    background: #000 top right no-repeat border-box content-box local url(banana.png)
}

上面的示例等同于：

p {
    border: 10px double black;
    background-color: #000;
    background-size: top right;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    background-attachment: local;
    background-image: url(banana.png);
}

3.3 创建盒子阴影

box-shadow属性可以用来为元素指定阴影，box-shadow的值的组成结构：box-shadow: hoffset voffset blur spread color inset，其中每个属性值的描述如下：

属性	描述
hoffset	阴影的水平偏移量，是一个长度值，正值表示向右偏移，负值表示向左偏移
voffset	阴影的垂直偏移量，是一个长度值，正值表示向下偏移，负值表示向上偏移
blur	可选值，指定模糊值，是一个长度值，值越大的盒子边界越模糊，默认值为0，表示边界清晰
spread	可选值，指定阴影的延伸半径，是一个长度值，正值表示阴影向盒子各个方向扩大，负值表示阴影沿相反方向缩小
color	可选值，设置阴影的颜色，如果省略，将会自行选择一个颜色
inset	可选值，将阴影设置为内部阴影（盒子内部）

需要注意的是，color属性如果没有值，浏览器可以自行应用标准颜色，这个标准颜色从哪里来，可能是某种适合用户当前系统或者浏览器主题的颜色。

示例：

div {
    height: 50px;
    width: 100px;
    box-shadow: 4px 5px 9px 2px gray;
}

3.4 设置轮廓

outline属性是设置应用轮廓的简写属性。轮廓和盒子边框的对比呢，一个是前者始终在后者的外面，另外一个，也是最重要的一个，边框属于页面但是轮廓不属于页面，因此它不会调整页面布局。轮廓的主要作用在于，它可以在短时间内抓住用户对于某个元素的注意力。常用的轮廓相关的属性有：

属性	说明	值
outlint-color	设置轮廓的颜色	<颜色>
outline-offset	设置轮廓的距离边框外边缘的偏移量	<长度值>
outline-style	设置轮廓样式	和border-style属性值一样
outline-width	设置轮廓宽度	thin、medium、thick、<长度>
outline	轮廓的简写属性	<颜色> <样式> <宽度>

值得注意的是：outline的简写值仅包含outline-color、outline-style和outline-width。如果需要指定outline-offset的值，需要额外的设置。

示例：

textarea {
    outline-offset: 10px;
    outline: green solid 4px;
}