- 1.与背景相关新增属性
- 2.在一个元素中显示多个背景图像
- 3.圆角边框绘制
- 4.图像边框
1.与背景相关新增属性
1.1background-clip
背景包括(背景延伸到哪儿):
background-clip:content-box; ×border ×padding
background-clip:border-box; √border √padding
background-clip:padding-box; ×border √padding
1.2background-origin
(都是从左上角开始绘制)
background-origin:content-box;从content开始
background-origin:border-box;从border开始
background-origin:padding-box;从padding开始
2.在一个元素中显示多个背景图像
background-image:url(),url();
background-position开始绘制的位置
3.圆角边框绘制
border-radius
4.图像边框
常见于对话框,如QQ聊天的对话框背景图片,其实是将其剪切为九宫格进行扩展
border-image:url() a b c d;
a-d四个参数决定了九宫格的裁剪方式:ac决定高,bd决定宽。往内切多少出来做边框