HTML5权威指南笔记：19-使用边框和背景

1 应用边框样式

关键属性：border - width 、border-style、border-color

例子：定义简单的边框

p {
border-width: 5px;
border-style: solid;
border-color: black;
}

1.1 定义边框宽度

border-width属性的取值：

＜长度值＞：将边框宽度值设为以css度量单位（ 如em 、px 、cm ) 表达的长度值。

＜百分数＞：将边框宽度值设为边框绘制区域的宽度的百分数。

Thin、medium、thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义的，不过，所有浏览器中这三个值代表的宽度依次增大。

1.2 定义边框样式

border-style属性的取值：

none：没有边框。

dashed：破折线式边框

dotted：圆点线式边框

double：双线式边框

groove：槽线式边框

inset： 使元素内容具有内嵌效果的边框

outset： 使元素内容具有外凸效果的边框

ridge： 脊线边框

solid： 实线边框

1.3 为一条边应用边框样式

定义顶边：

border-top-width

border-top-style

border-top-color

定义底边：

border-bottom-width

border-bottom-style

border-bottom-color

定义左边：

border-left-width

border-left-style

border-left-color

定义右边：

border-right-width

border-right-style

border-right-color

1.4 使用border简写属性

设置所有边的边框：

border:＜宽度＞＜样式＞＜颜色＞

设置一条边的边框：

border-top:＜宽度＞＜样式＞＜颜色＞
border-bottom:＜宽度＞＜样式＞＜颜色＞
border-left:＜宽度＞＜样式＞＜颜色＞
bottom-right:＜宽度＞＜样式＞＜颜色＞

1.5 创建圆角边框

使用边框的radius特性创建圆角边框

属性	说明	值
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius	设置一个圆角	一对长度值或百分数值，百分数跟边框盒子的宽度和高度相关
border-radius	一次设置四个角的简写属性	一对或四对长度值或百分数值，由/字符分割

例子：创建一个圆角边框

/*第一个值指定水平曲线半径，第二个值指定垂直曲线半径。
如果只提供一个值，那么水平半径和垂直半径都是这个值*/
border-top-left-radius: 20px 15px;

例子：使用border-radius简写属性设置4个圆角

/*只指定了两个值，这一对值会应用到边框的四个角上，用/字符将水平半径和垂直半径隔*/
border-radius: 20px / 15px;
/*设置了8个值，分别是水平的4个角的半径和垂直的4个角半径*/
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%

1.6 将图像用做边框

可以使用border-image属性为元素创建真正的自定义边框

<
b080
td>指定边框图像向外扩展的部分

属性	说明	值
border-image-source	设置图像来源	none或者url(< 图像＞）
border-image-slice	设置切分图像的偏移	1~4个长度值或者百分数，受图像的宽度和高度影响
border-image-width	设置图像边框的宽度	auto或1~4个长度值或者百分数
border-image-outset	1~4个长度值或者百分数
border-image-repeat	设置图像填充边框区域的模式	stretch 、repeat和round中的一个或两个值
border-image	在一条声明中设置所有值的简写属性	跟单个属性的值一样

border- image- repeat样式的值

stretch：拉伸切分图填满整个空间，默认值。

repeat：平铺切分图填满整个空间（可能导致图片被截断）。

round：在不截断切分图的情况下，平铺切分图并拉伸以填满整个空间。

space：在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间。

例子：控制切分图的重复样式

/*-moz-是浏览器厂商特定前缀
切分值和宽度之间用/分开*/
-moz-border-image: url(bordergrid.png) 30 / 50px round repeat;

2 设置元素的背景

背景属性：

1. background-color：设置元素的背景颜色， 总是显示在背景图像下面

2. background-image：绘制在前面的图像下面

3. background-repeat：设置图像的重复样式

4. background-size：设置背景图像的尺寸

5. background-position：设置背景图像的位置

6. background-attachment：设置元素中的图像是否固定或随页面一起滚动

7. background-clip：设置背景图像裁剪方式

8. background-origin：设置背景图像绘制的起始位置

9. background：简写属性

2.1 设置背景颜色和图像

例子：

background-color: lightgray;
background-image: url(banana.png);
background-size: 40px 40px;
background-repeat: repeat-x;

background-repeat属性的值：

repeat-x：水平方向平铺图像，图像可能被截断。

repeat-y：垂直方向平铺图像，图像可能被截断。

repeat：水平和垂直方向同时平铺图像，图像可能被截断。

space：水平或者垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断。

round：水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断。

no-repeat：禁止平铺图像。

2.2 设置背景图像的尺寸

background-size属性的值：

background-size:contain;

background-size属性的值：

1. contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合，背景图像始终包含在容器内。

2. cover：等比例缩放图像，使图像至少覆盖容器， 有可能超出容器。

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

2.3 设置背景图像位置

例子：

/*
第一个值控制垂直位置，可以是top 、bottom和center,第二个值控制水平位置，可以是left、right和center*/
background-position: 30px 10px;

background-position属性的值：

1. top：将背景图像定位到盒子顶部边界

2. left：将背烘图像定位到盒子左边界

3. right：将背景图像定位到盒子右边界

4. bottom：将背景图像定位到盒子底部边界

5. center：将背景图像定位到中间位置

2.4 设置元素的背景附着方式

例子：

background-attachment: scroll;

background - attachment属性的值

1. fixed：背景固定到视窗上，即内容滚动时背景不动

2. local：背景附着到内容上，即背景随内容一起滚动

3. scroll：背景固定到元素上， 不会随内容一起滚动

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

/*两者一起使用，告诉浏览器在边框盒子内部绘制背景，但是丢弃内容盒子之外的部分*/
background-origin: border-box;
background-clip: content-box;

background-origin和background-clip属性的值：

border-box：在边框盒子内部绘制背景颜色和背景图像

padding-box：在内边距盒子内部绘制背景颜色和背景图像

content-box：在内容盒子内部绘制背景颜色和背景图像

2.6 使用background简写属性

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

3 创建盒子阴影

box-shadow属性实现阴影效果

box-shadow属性的值：

hoffset：阴影的水平偏移址，是一个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移。
voffset：阴影的垂直偏移址，是一个长度值，正值代表阴影位于元素盒子下方，负值代表阴影位于元素盒子上方。
blur：（可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为0. 边界清晰。
spread：（可选）指定阴影的延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小。
color：（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色。
inset：（可选） 将外部阴影设置为内部阴影（内嵌到盒子中）

例子：

/*为一个元素应用阴影*/
box-shadow: 5px 4px 10px 2px gray;
/*为一个元素应用多个阴影,用,分开*/
box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;

4 应用轮廓

outline轮廓属性：

属性	说明	值
outline-color	设置外围轮廓的颜色	＜颜色＞
outline-offset	设置轮廓距离元素边框边缘的偏移量	＜长度＞
outline-style	设置轮廓样式	跟border-style属性的值一样
outline-width	设置轮廓的宽度	thin 、medium 、thick 、＜长度＞
outline	在一条声明中设置轮廓的简写属性	＜颜色＞＜样式＞＜宽度＞

例子：

outline: thick solid red;