background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图片设置为背景
background-position 设置图片的起始位置
background-repeat 设置背景图片是否及如何重复
css3新增的背景属性
background-size 规定背景图片的尺寸
设置背景图片的大小
()
background-origin 规定背景图片的定位区域
border-box 从边框开始绘制
content-box 从padding开始绘制
padding-box 从内容开始绘制
background-clip 规定背景的绘制区域
border-box （包含边框和内边距）
content-box （边框和内边距都不包含）
padding-box （只包含内边距，不包含边框）
<style>
div{
background-color:black;
border:dashed 15px green;
padding:30px;
color:white;
font-size:30px;
font-weight:bold;
}
.div1{
background-clip:border-box;
margin-top:40px;
}
.div2{
background-clip:padding-box;
margin-top:40px;
}
.div3{
background-clip:content-box;
margin-top:40px;
}
</style>
<body>
<div class="div1">示例1</div>
<div class="div2">示例2</div>
<div class="div3">示例3</div>
</body>
在一个元素中显示多个背景图片，还可以将多个背景图片进行重叠显示
<style>
div{
background-image:url("path-andriod.png"),url("img2.jpg");
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center,center;
width:1000px;
height:800px;
}
</style>
<body>
<div></div>
</body>
圆角边框的绘制
border-radius : length length length length ;
使用图像边框
九宫格方式
使用元素的长度或宽度，随时根据内容的变化而变化，根据边框的变化而变化
/*a b c d*/
border-image : url("") 50 50 50 50 ;
3个属性：图片，裁剪位置，重复性
裁剪位置没有单位，专指像素。
而对于border-image，可谓是三足鼎立，repeat（重复）只是其中之一，其余两个是round（平铺）和stretch（拉伸）。其中，stretch是默认值。