前端笔记九，背景边框和补丁相关属性

Posted 2020-06-09

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