常用的背景相关属性:以下属性均在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同理