前端学习之背景、边框和边距相关属性

背景相关属性：

➢background: 设置对象的背景样式。该属性是-一个复合属性,可用于同时设置背景色、
背景图片、背景重复模式等属性。该属性值格式如下:background-color、background- image、background-repeat、background-attachment、background-position
➢background-color: 用于设置背景色。同时设置了背景色和背景图片，则背景图
片将覆盖背景色。
➢background-image: 用于设置背景图片。该属性需要使用url()函数指定图片地址
➢background-repeat: 用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。该属性有repeat.no-repeat.repeat-x、repeat-y
➢background-attachment: 用于设置背景图片是随对象内容滚动还是固定的。在指定该属性之前，必须先指定background- image属性。fixed：背景图片固定。
➢background position:用于设置对象的背景图片位置。
➢background-origin属性用于指定背景从哪里覆盖，可以指定如下几个属性值。
border-box: 从边框区开始。padding-box: 从内填充区开始。content-box: 从内容区开始
使用渐变背景
➢linear-gradient：to top、to bottom、to left、to right、to left top . . . . . .
background:linear-gradient (0deg,red, blue)、 红蓝线性渐变
➢repeating-linear-gradient函数来设置循环线性渐变，将会循环利用给出的渐变颜色形成更绚丽的背景。background : repeating-linear-gradient (red, blue 10%，magenta 20%)
红、蓝、洋红循环线性渐变
➢repeating-radial-gradient设置循环径向渐变

边框相关属性：

➢border: 是复合属性，用于设置目标元素的边框样式。可设置边框的粗细、线型、颜色。
➢border-color: 用于设置元素的边框颜色。如果提供4个参数值，则将按上、右、下、
左的顺序一次设置4个边框的颜色:如果只提供1个参数值，则将用于设置4个边框
的颜色;如果提供2个参数值，则第一个用于设置上、下两个边框的颜色:第二个用
于设置左、右两个边框的颜色;如果提供3个参数值，则第一个用于设置上边框的颜
色，第二个用于设置左、右两个边框的颜色，第三个用于设置下边框的颜色。
➢border-style: 用于设置元素的边框线型。设置规则同上
➢border-width: 用于设置目标元素的边框线宽。设置规则同上。
➢border-top: 这是一个复合属性，用于设置目标元素的上边框样式。可同时设置边框的
粗细、线型、颜色。
➢border-top-color; 用于设置目标元素的上边框颜色。
➢border-top-style: 用于设置目标元素的上边框线型。
➢border-top-width: 用于设置目标元素的上边框线宽。
border-right、border-left、border-bottom是复合属性，属性同上
➢none:无边框。
➢hidden: 隐藏边框。
➢dotted: 点线边框。
➢dashed: 虚线边框。
➢solid: 实线边框。
➢double:双线边框。
border-radius：圆角边框

**opacity：**控制透明度 属性值从0到1

内填充相关属性

➢padding:该属性可以同时设置上、下、左、右4个边的内填充距离。该属性允许设置
4个长度，分别对应于上、右、下、左4个边的内填充距离;
➢padding-top: 设置上边的内填充距离。
➢padding-right: 设置右边的内填充距离。
➢padding-bottom: 设置下边的内填充距离。
➢padding-lef: 设置左边的内填充距离。

外填充相关属性

➢margin: 该属性可以同时设置上、下、左、右4个边的外边距距离。该属性允许设置4个长度，分别对应于上、右、下、左4个边的外边距距离;
➢margin-top: 设置上边的外边距距离。
➢margin-right: 设置右边的外边距距离。
➢margin-bottom: 设置下边的外边距距离。
➢margin-left: 设置左边的外边距距离。