标签：
常用的背景相关属性：以下属性均在style内设置
background:设置对象的背景样式，不建议直接通过该属性来控制
background-attachment:设置背景图片是随对象内容滚动还是固定的，可选值：
scroll:会随内容的滚动而滚动
fixed:背景图片固定
background-color:设置背景色，如果设置了背景图片则会覆盖背景色
background-image:设置背景图片，使用url()函数
background-position:设置对象的背景图片的位置，第一个表示横坐标，第二个表示纵坐标
background-repeat:设置背景图片是否平铺，可选值：
repeat:平铺
no-repeat:不平铺
repeat-x:仅横向平铺
repeat-y:仅纵向平铺
background-clip:设置背景覆盖的范围，支持如下属性值
border-box:指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。
no-clip:指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)。
padding-box:指定背景覆盖内补丁区(padding)、内容区(content)。
content-box:指定背景只覆盖内容区(content)。
background-origin:设置背景覆盖的起点，类似之前的background-position，可选的属性值
border:指定背景图片从边框区开始覆盖
padding:指定背景图片从内补丁区开始覆盖
content:指定背景图片从内容区开始覆盖
background-size:设置背景图片的大小，两个值分别表示图片的宽度和高度，可用值：
数值：例如20pt，直接表示大小
百分比，例如80%，表示占它所在组件的宽或高的百分比
auto:指定背景图片保持纵横比进行缩放
background-origin和background-size在Safari、Chrome中使用时，如果不读，则可以在前面添加 -webkit-
指定多个背景图片时，每个属性都需要指定多个，中间用逗号隔开
边框相关属性
border:复合属性，可以同时设置边框的粗细，线型，颜色等
border-color:设置边框的颜色
提供4个值，则分别表示上、右、下、左四个边框的颜色
提供3个值，则分别表示上、左右、下三个边框的颜色
提供2个值，则分别表示上下、左右边框的颜色
提供1个值，则表示上下左右共同的颜色
border-style:设置组件的边框线型，值的数量与上同理
border-width:设置边框的线宽，值的数量与上同理
border-top:复合属性，设置上边框的样式
border-top-color:设置上边框的颜色
border-top-style:设置上边框的样式
border-top-width:设置上边框的线宽
上边的top换成left、right、bottom分别表示左边框的，右边框的，下边框的
其中，边框颜色可以是任何有效的颜色值，线宽可以是任何有效的长度值，线性可以支持以下值：
none:无边框
hidden:隐藏边框
dotted:点线边框
dashed:虚线边框
solid:实线边框
double:双线边框
groove:3D凹槽边框
ridge:3D凸槽边框
inset:3D凹入边框
outset:3D凸出边框
渐变边框
border-top-colors:设置上边框的颜色，如果上边框的宽度为Npx，则可以设置N种颜色；如果颜色数量小于N，则最后一种颜色会覆盖剩下的宽度
border-right-colors,border-bottom-colors,border-left-colors同理
博主备注：这个渐变边框在实际代码中没有实现
圆角边框
border-radius:设置四个角的圆角半径
border-top-left-radius:设置左上角的圆角半径
border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius同理
图片边框：
border-image:遵循的格式：
<border-image-source> <border-image-slice>[/<border-image-width>]?<border-image-repeat>
其中，
border-image-source:指定边框图片，可以是none或者url()指定的图片
border-image-slice:指定1~4个数值或者百分比表示如何对边框图片进行分割。比如10 20 30 40则表示距离上 右 下 左边框的距离分别为10px 20px 30px 40px且与对应的边框平行的切割线联合切割，将中间的图片进行舍弃，其他部分作为边框，除非在第四个数值后面添加了&&fill
border-image-width:指定图片宽度，四个值
border-image-repeat:设置边框图片的覆盖方式，支持stretch,repeat,round三种，分别表示拉伸覆盖，平铺覆盖，取整平铺三种
补丁相关属性
内补丁相关属性：
padding:可以设置4个数值，分别表示上下左右四个边的内部定距离；设置3、2、1个数值与之前对应关系相同
padding-top:设置上边的内补丁距离
padding-bottom,padding-left,padding-right同理
外补丁相关属性：
margin:设置外补丁距离，对应关系与padding一致
margin-top,margin-bottom,margin-left,margin-right同理
前端笔记九，背景、边框和补丁相关属性
标签：
原文地址：http://www.cnblogs.com/likaopu/p/5167423.html
