05 CSS3-背景与边框相关样式

背景相关样式部分

一，背景绘制区域样式

实现方式：

background-clip:属性值；

属性列表

二，背景图片定位区域样式

实现方式：

background-origin:属性值；

属性列表

三，多重背景样式

实现方式：

1，多张背景图

background-image：url("图片地址"),url("图片地址")，...url("N张图片地址")；

2，背景图平铺

background-repeat:属性值,属性值，...N个属性值；

属性列表

边框相关样式部分

一，圆角边框样式

实现方式：

border-radius:左上角值,右上角值,右下角值,左下角值；

二，图像边框样式

实现方式：

border-image:url("图片地址")左上角值,右上角值,右下角值,左下角值；

1，利用九宫格图理解该样式
2，四个数值决定图片被拉伸区域
3，其中，1,3,7,9分别对应四个数值，5代表被拉伸和承载内容的区域

九宫格图