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可选值如下：

dashed效果：

dotted效果：

double效果：

groove效果：

inset效果

outset效果

ridge效果：

solid效果：

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

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

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

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

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

3.1.4 定义圆角边框

定义边框的圆角，可是使用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个:

目前各大浏览器对于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条边的展示效果，其可用的属性值如下：

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

3.2 设置元素背景

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

3.2.1 background-repeat的属性值描述

3.2.2 设置图像大小

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

• contain

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

• cover

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

• auto

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

3.2.3 设置图像背景位置

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

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

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

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

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

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

示例：

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，其中每个属性值的描述如下：

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

示例：

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

3.4 设置轮廓

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

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

示例：

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