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

1 应用边框样式

关键属性：border - width 、border-style、border-color
例子：定义简单的边框

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

1.1 定义边框宽度

border-width属性的取值：

1. ＜长度值＞：将边框宽度值设为以css度量单位（ 如em 、px 、cm ) 表达的长度值。
2. ＜百分数＞：将边框宽度值设为边框绘制区域的宽度的百分数。
3. Thin、medium、thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义的，不过，所有浏览器中这三个值代表的宽度依次增大。

1.2 定义边框样式

border-style属性的取值：

1. none：没有边框。
2. dashed：破折线式边框
3. dotted：圆点线式边框
4. double：双线式边框
5. groove：槽线式边框
6. inset： 使元素内容具有内嵌效果的边框
7. outset： 使元素内容具有外凸效果的边框
8. ridge： 脊线边框
9. 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属性为元素创建真正的自定义边框

属性 说明 值 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样式的值

1. stretch：拉伸切分图填满整个空间，默认值。
2. repeat：平铺切分图填满整个空间（可能导致图片被截断）。
3. round：在不截断切分图的情况下，平铺切分图并拉伸以填满整个空间。
4. 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属性的值：

1. repeat-x：水平方向平铺图像，图像可能被截断。
2. repeat-y：垂直方向平铺图像，图像可能被截断。
3. repeat：水平和垂直方向同时平铺图像，图像可能被截断。
4. space：水平或者垂直方向平铺图像，但在图像与图像之间设置统一间距，确保图像不被截断。
5. round：水平或者垂直方向平铺图像，但调整图像大小，确保图像不被截断。
6. 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;