CSS3的背景、边框和边距相关属性

野性酷女 2022-04-22 18:44 269阅读 0赞

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS3还新增了多背景图片支持，从而允许我们在HTML组件中定义多个背景图片。CSS3还新增了大量边框相关属性，通过这些属性可以让我们定义圆角边框、渐变边框、图片边框等。

# 背景相关属性 #

背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时，还可控制背景图片的排列方式。有如下几个常用的背景相关属性。

*  background：设置对象的背景样式。该属性是一个复合属性，可用于同时设置背景色、背景图片、背景重复模式等属性。为了更好地控制背景，一般不建议通过该属性来控制背景。
 *  background-attachment：设置背景图片是随对象内容滚动还是固定的。在指定该属性之前，必须先指定background-image属性。该属性有如下两个值。scroll：指定背景图片会随组件里内容的滚动而滚动。这是默认值。fixed：背景图片固定，不会随组件里内容的滚动而滚动。
 *  background-color：用于设置背景色。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。
 *  background-image：用于设置背景图片。如果同时设置了背景色和背景图片，则背景图片将覆盖背景色。该属性需要使用url()函数指定图片地址，图片地址既可以是相对地址，也可以是绝对地址。
 *  background-position：用于设置对象的背景图片位置，该属性值应该是两个值，它们既可是实际的长度值，也可是百分比。如果只指定了一个值，该值将对应横坐标，纵坐标将默认为50%；如果指定了两个值，那么第二个值将对应纵坐标。在指定该属性之前，必须先指定background-image属性。
 *  background-repeat：适用于CSS1，用于设置对象的背景图片是否平铺。在指定该属性之前，必须先指定background-image属性。该属性有repeat、no-repeat、repeat-x、repeaty 4个值，分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。

下方的图就展示了这些背景相关属性的效果，**源码可在我的资源库中下载    [点击前往][Link 1]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

## 1.背景图片固定 ##

在默认情况下，组件里的背景图片会随着滚动条的滚动而自动移动，但如果把background-attachment属性设为fixed，那么背景图片就会被固定在该组件中，不会随着滚动条的滚动而移动。下方图片示范了背景固定的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

## 2.CSS3新增的背景相关属性 ##

CSS3新增了如下几个背景相关属性：

<table> 
 <tbody> 
  <tr> 
   <td style="width:150px;">background-clip</td> 
   <td style="width:699px;">用于设置背景覆盖的范围。</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">background-origin</td> 
   <td style="width:699px;">用于设置背景覆盖的起点，该属性与前面介绍的background-position有些相似。</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">background-size</td> 
   <td style="width:699px;">用于设置背景图片的大小。该属性由两个值组成，分别代表图片的宽度、高度。宽度、高度支持如下3种写法：长度值（px）、百分比（%）、auto（保持纵横比缩放）</td> 
  </tr> 
  <tr> 
   <td style="width:150px;">background-repeat新增的space和round</td> 
   <td style="width:699px;">保证背景图片不会被裁剪，完整的显示出来。</td> 
  </tr> 
 </tbody> 
</table>

### 2.1 background-clip ###

背景的覆盖范围由background-clip属性指定，该属性支持如下几个属性值。

*  border-box：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。
 *  no-clip：指定背景覆盖边框区（border）、内补丁区（padding）、内容区（content）。
 *  padding-box：指定背景覆盖内补丁区（padding）、内容区（content）。
 *  content-box：指定背景只覆盖内容区（content）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2][]

### 2.2  background-origin ###

background-origin属性用于指定背景从哪里覆盖，可以指定如下几个属性值。

*  border：指定背景图片从边框区开始覆盖。
 *  padding：指定背景图片从内补丁区开始覆盖。
 *  content：指定背景图片从内容区开始覆盖。

需要指出的是，Firefox、Opera的最新版本暂不支持该属性，在Chrome、Safari中使用该属性时要把该属性写成-webkit-background-origin。如下示范了background-origin属性的功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3][]

### 2.3 background-size ###

在以前，当我们为HTML元素设置背景图片，该图片铺到该组件上时，图片的大小总是该图片的原始大小。CSS3的出现改变了这种现状，background-size属性可控制背景图片的大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4][]

### 2.4 background-repeat新增的space和round ###

CSS3为background-repeat新增的space和round两个属性都用于保证背景图片不会被裁剪，它们之间的区别在于：round会自动调整背景图片的大小，从而保证HTML的元素内平铺每一个背景图片都能完整的显示出来；而space则不会调整背景图片的大小，它只是调整背景图片的间距。

![20190127195342365.png][]

## 3.CSS3新增的多背景图片 ##

在CSS3以前，每个组件只能指定一种背景图片，如果同时指定了背景颜色和背景图片，那么背景图片会覆盖背景颜色。CSS3允许同时指定多个背景图片，这些背景图片会依次覆盖。CSS3并没有为多背景图片支持提供额外的属性，多背景图片依然是通过background-image、background-repeat、background-position、background-size等属性来控制的，只是CSS 3允许指定多个属性值（多个属性值之间以英文逗号隔开），这样即可实现多背景图片的效果。下方图片展示了多背景图片的效果：

![20190114173347221.png][]

# 边框相关属性 #

边框相关属性用于设置目标对象的边框特征，包括边框颜色、粗细，以及使用的线型。边框相关属性有如下几个：

<table> 
 <tbody> 
  <tr> 
   <td style="width:145px;">border</td> 
   <td>这是一个复合属性，用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-color</td> 
   <td>用于设置组件的边框颜色。如果提供4个参数值，则将按上、右、下、左的顺序一次设置4个边框的颜色；如果只提供1个参数值，则将用于设置4个边框的颜色；如果提供2个参数值，则第一个用于设置上、下两个边框的颜色；第二个用于设置左、右两个边框的颜色；如果提供3个参数值，则第一个用于设置上边框的颜色，第二个用于设置左、右两个边框的颜色，第三个用于设置下边框的颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-style</td> 
   <td>用于设置组件的边框线型。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线型；如果只提供1个参数值，则将用于设置4个边框的线型；如果提供2个参数值，则第一个用于设置上、下两个边框的线型，第二个用于设置左、右两个边框的线型；如果提供3个参数值，则第一个用于设置上边框的线型，第二个用于设置左、右两个边框的线型，第三个用于设置下边框的线型。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-width</td> 
   <td>用于设置目标组件的边框线宽。如果提供4个参数值，则将按上、右、下、左的顺序依次设置4个边框的线宽；如果只提供1个参数值，则将用于设置4个边框的线宽；如果提供2个参数值，则第一个用于设置上、下两个边框的线宽，第二个用于设置左、右两个边框的线宽；如果提供3个参数值，则第一个用于设置上边框的线宽，第二个用于设置左、右两个边框的线宽，第三个用于设置下边框的线宽。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-top</td> 
   <td>这是一个复合属性，用于设置目标组件的上边框样式。可同时设置边框的粗细、线型、颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-top-color</td> 
   <td>用于设置目标组件的上边框颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-top-style</td> 
   <td>用于设置目标组件的上边框线型。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-top-width</td> 
   <td>用于设置目标组件的上边框线宽。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-right</td> 
   <td>这是一个复合属性，用于设置目标组件的右边框样式。可同时设置边框的粗细、线型、颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-right-color</td> 
   <td>用于设置目标组件的右边框颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-right-style</td> 
   <td>用于设置目标组件的右边框线型。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-right-width</td> 
   <td>用于设置目标组件的右边框线宽。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-bottom</td> 
   <td>这是一个复合属性，用于设置目标组件的下边框样式。可同时设置边框的粗细、线型、颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-bottom-color</td> 
   <td>用于设置目标组件的下边框颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-bottom-style</td> 
   <td>用于设置目标组件的下边框线型。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-bottom-width</td> 
   <td>用于设置目标组件的下边框线宽。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-left</td> 
   <td>这是一个复合属性，用于设置目标组件的左边框样式。可同时设置边框的粗细、线型、颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-left-color</td> 
   <td>用于设置目标组件的左边框颜色。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">border-left-style</td> 
   <td>用于设置目标组件的左边框线型。</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp;border-left-width</td> 
   <td>用于设置目标组件的左边框线宽。在上面的边框相关属性中，边框颜色可以是任何有效的颜色值，而线宽可以是任何有效的长度值。线型可以支持这些属性（&nbsp;none：无边框。hidden：隐藏边框。dotted：点线边框。dashed：虚线边框。&nbsp;solid：实线边框。double：双线边框。groove：3D凹槽边框。ridge：3D凸槽边框。inset：3D凹入边框。&nbsp;outset：3D凸出边框。）</td> 
  </tr> 
 </tbody> 
</table>

虽然提供了这么多线型，但不是每个浏览器中都可以看出全部线型的效果。下方图片分别使用了不同的边框属性，用于演示线型、线宽、颜色等属性控制边框后的效果。为了更好地看出边框效果，页面还用CSS设置了<div.../>元素的大小。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5][]

## 1.CSS3提供的渐变边框 ##

CSS3提供了如下4个属性来支持渐变边框：

1.  border-top-colors：该属性用于设置目标组件的上边框颜色。如果设置上边框的宽度是Npx，那么就可以为该属性设置N种颜色，每种颜色显示1px的宽度。但如果设置的颜色数量小于边框的宽度，那么最后一个颜色将会覆盖该边框剩下的宽度。假如边框的宽度是10x，如果该属性只声明了5或6种颜色，那么最后一个颜色将会覆盖该边框剩下的宽度。
2.  border-right-colors：该属性用于设置目标组件的右边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。
3.  border-bottom-colors：该属性用于设置目标组件的下边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。
4.   border-left-colors：该属性用于设置目标组件的左边框颜色。该属性指定的多个颜色值的意义与border-top-colors属性里各颜色值的意义相同。

需要指出的是，这4个属性目前只有Firefox浏览器才支持，而且使用该属性时必须在前面增加-moz-前缀。如下图片展示了CSS3提供的渐变边框效果。

![20190123122847848.png][]

## 2.CSS3提供的圆角边框 ##

CSS3为支持圆角边框提供了如下属性：

*  border-radius：该属性用于指定圆角边框的圆角半径（半径越大，圆角的程度越大）。如果该属性指定1个长度，则4个圆角都使用该长度作为半径；如果指定2个长度，则第一个长度将作为左上角、右下角的半径；第二个长度将作为右上角、左下角的半径；如果指定3个长度，则第一个长度将作为左上角的半径，第二个长度将作为右上角、左下角的半径；第三个长度将作为右下角的半径。
 *   border-top-left-radius：该属性用于指定左上角的圆角半径。
 *  border-top-right-radius：该属性用于指定右上角的圆角半径。
 *  border-bottom-right-radius：该属性用于指定右下角的圆角半径。
 *  border-bottom-left-radius：该属性用于指定左下角的圆角半径。

下方图片展示了圆角边框的功能，有几个不同类型的圆角边框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 6][]

##  3.CSS3提供的图片边框 ##

CSS 3为图片边框提供了如下属性：

border-image：该属性的值比较复杂，应该遵守如下格式：  
上面语法格式可分为4个部分。

1.  border-image-source：指定边框图片。该值可以是none（没有边框图片）或使用url()函数指定图片。
2.  border-image-slice：该属性值可指定1～4个数值或百分比数值，这4个数值用于控制如何对边框图片进行切割。假设指定了10 20 30 40，这4个数值分别指定切割边框图片时上边框为10像素，右边框为20像素，下边框为30像素，左边框为40像素。切割示意图如下图所示。
3.  border-image-width：该属性用于指定图片边框的宽度。该属性值可指定1～4个长度值、数值、百分比数值或auto。如果为border-image-slice只指定了1个值，则4个边框的宽度都等于该值；如果指定了2个值，那么第一个值将作为上、下边框的宽度，第二个值将作为左、右边框的宽度；如果指定了3个值，则第一个值将作为上边框的宽度，第二个值将作为左、右边框的宽度，第三个值将作为下边框的宽度。
4.  border-image-repeat：该属性用于指定边框图片的覆盖方式，支持stretch（拉伸覆盖）、repeat（平铺覆盖）、round（取整平铺）三种覆盖方式。该属性可指定两个值，分别代表横向、纵向覆盖方式。

小提示：repeat与round覆盖方式基本相似，区别在于：round方式多了这样的处理——如果最后一个边框图片不能完全显示，且最后一个边框图片能显示的区域不到一半，就不显示最后的边框图片，然后扩大前面的图片，让它们能完全覆盖显示区域；如果最后一个边框图片不能完全显示，且最后一个边框片能显示的区域超过一半，就显示最后的边框图片，然后稍微缩小前面的所有图片，让它们和最后一个图片能完全显示出来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 7][]

下方图片展示了图片边框的功能，通过一张图片去设置border-image属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 8][]

#  使用opacity控制透明度 #

opacity用于设置整个HTML的透明度，不管是背景色、前景色还是边框都会受到影响。opacity属性的值从0到1，其中0代表完全透明，1代表完全不透明。下方图片将展示出opacity属性的作用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 9][]

# padding和margin相关属性 #

一个组件由元素内容区（content）、内补丁区（padding）、边框区（border）、外补丁区（margin）4个区域组成。其中内补丁区是该组件的内容与边框之间的距离，外补丁区是该组件边框之外的空白。内补丁区和外补丁区的颜色总是透明的。

## 1.内填充相关属性 ##

内补丁相关属性有如下几个：

*  padding：该属性可以同时设置上、下、左、右4个边的内补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的内补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的内补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的内补丁距离，后一个长度将作为左、右边的内补丁距离；如果设置了3个长度，则第一个长度将作为上边的内补丁距离，第二个长度将作为左、右边的内补丁距离，第三个长度将作为、下边的内补丁距离。
 *  padding-top：设置上边的内补丁距离。
 *  padding-right：设置右边的内补丁距离。
 *   padding-bottom：设置下边的内补丁距离。
 *  padding-left：设置左边的内补丁距离。

![20190123121123130.png][]

## 2. 外边距相关属性 ##

外补丁相关属性有如下几个：

*  margin：该属性可以同时设置上、下、左、右4个边的外补丁距离。该属性允许设置4个长度，分别对应于上、下、左、右4个边的外补丁距离；如果只设置了1个长度，则该值将作为上、下、左、右4个边的外补丁距离；如果设置了2个长度，则前一个长度将作为上、下边的外补丁距离，后一个长度将作为左、右边的外补丁距离；如果设置了3个长度，则第一个长度将作为上边的外补丁距离，第二个长度将作为左、右边的外补丁距离，第三个长度将作为下边的外补丁距离。
 *  margin-top：设置上边的外补丁距离。
 *  margin-right：设置右边的外补丁距离。
 *  margin-bottom：设置下边的外补丁距离。
 *  margin-left：设置左边的外补丁距离。

下方图片就展示了外补丁相关属性的功能，**如果需要源码，可以在我的资源库进行下载。  [点击前往][Link 1]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 10][]

\------------如果大家喜欢[湮顾千古][Link 2]的博客，可以点击左上角的关注哦。

[Link 1]: https://download.csdn.net/download/sujin_/10940749
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220327/10aec4a1733149fe854af98fda859cd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: /images/20220327/bd0d3efc760344f3903198142cafd2bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2]: /images/20220327/ec85f859bb734c1096fb5e8f084c20b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3]: /images/20220327/3a4dcd4841494089b8bf9dc96d0dda6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 4]: /images/20220327/bc285753fc4548cfa4ab3b4e941a07d4.png
[20190127195342365.png]: /images/20220327/529054a5f6db4b7a93eb1d23d6b381d9.png
[20190114173347221.png]: /images/20220327/7f2cdc7da0d64d4588298d475a734b46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 5]: /images/20220327/3fe6a21061314fc4a6934c15e21fb35a.png
[20190123122847848.png]: /images/20220327/fd4a4787090d48bc91e9caae36512743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 6]: /images/20220327/dcad1141da6143aabf8e9c4084e65cf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 7]: /images/20220327/b042a7ec22644bdda65de0e8592d8d99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 8]: /images/20220327/bf088f3f4bfb4452b1874b0f57417ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 9]: /images/20220327/05a3d65a564641599c8be712d410e875.png
[20190123121123130.png]: /images/20220327/89b30818eca04a2091e7cb6ea82b93d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 10]: /images/20220327/c9739f9b56e34126969e722aa783e722.png
[Link 2]: https://blog.csdn.net/sujin_