一、与背景相关的新增属性
1）background-clip.可以修改背景的显示范围
background-clip:content-box / padding-box / content-box
| 值 |
描述 |
| border-box |
背景被裁剪到边框盒。 |
| padding-box |
背景被裁剪到内边距框。 |
| content-box |
背景被裁剪到内容框。 |
依次效果
2）background-origin.可以设置背景图片从页面哪一个点开始绘制，默认为左上角，但是区分是content、margin、padding的左上角
background-origin:content-box / border-box / content-box
| 值 |
描述 |
| padding-box |
背景图像相对于内边距框来定位。 |
| border-box |
背景图像相对于边框盒来定位。 |
| content-box |
背景图像相对于内容框来定位。 |
3）background-size规定背景图像的尺寸
background-size: width height |percentage|cover|contain;
| 值 |
描述 |
| width height |
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage |
以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover |
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain |
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
二、在一个元素中显示多个背景图像
background-repeat: repeat;
| 值 |
描述 |
| repeat |
默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x |
背景图像将在水平方向重复。 |
| repeat-y |
背景图像将在垂直方向重复。 |
| no-repeat |
背景图像将仅显示一次。 |
| inherit |
规定应该从父元素继承 background-repeat 属性的设置。 |
三、圆角边框的绘制
向 div 元素添加圆角边框：
border-radius: 1-4 length|% / 1-4 length|%;
| 值 |
描述 |
| length |
定义圆角的形状。 |
| % |
以百分比定义圆角的形状。 |
按顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
| 值 |
描述 |
| length |
定义圆角的形状。 |
| % |
以百分比定义圆角的形状。 |
四、使用图像边框
将图片规定为包围 div 元素的边框：
border-image:url(border.png) 30 30 round;
| 值 |
描述 |
| border-image-source |
用在边框的图片的路径。 |
| border-image-slice |
图片边框向内偏移。 |
| border-image-width |
图片边框的宽度。 |
| border-image-outset |
边框图像区域超出边框的量。 |
| border-image-repeat |
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
网友评论