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

灰太狼 2023-05-21 15:12 22阅读 0赞

**背景相关属性：**

> ➢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: 设置左边的外边距距离。