背景、边框和边距相关属性 学习总结

1.盒模型简介

    CSS的一个重要概念是盒模型。一个HTML元素所占用的矩形区域可以称之为一个“盒子”。该矩形区域由内容区、内填充区、边框区和外边距区组成

2.背景相关属性

    background：用于设置对象的背景格式。其复合属性包括：background-color(背景颜色)、background-image(背景图片)、background-repeat(背景重复模式   常用 no-repert)、background-attachment(背景图片是否随对象内容滚动还是固定)、background-position(背景图片位置)
    background-clip：用于设置背景覆盖的范围。
                border-box：指定背景覆盖盒模型的边框区、内填充区、内容区。
                no-clip：指定背景覆盖盒模型的边框区、内填充区、内容区。
                padding-box：指定覆盖盒模型的内填充区、内容区。
                content-box：指定背景只覆盖盒模型的内容区。
    background-origin：用于设置背景覆盖的起点。
                border-box：指定背景图片从边框区开始覆盖。
                padding-box：指定背景图片从内填充区开始覆盖。
                content-box：指定背景图片从内容区开始覆盖。
    background-size：用于设置背景图片大小。

3.使用渐变背景

     linear-gradient（方向？颜色列表）:线性渐变
          渐变方向：
                 to top/bottom/left/right、to top left等。
                 Ndeg:指定角度值。0deg代表12点方向，顺时针转动。
           渐变颜色：
                  颜色1  位置1，颜色2 位置2，.................
      repeating-linear-gradient：  循环线性渐变
      radial-gradient：径向渐变：形状、大小、圆心、颜色列表
      repeating-radial-gradient：  循环径向渐变

4.边框相关属性

     border：常用格式：border:Npx solid #XXX;
     border-top/bottom/left/right-color/style/width：用于设置元素边框的格式
          渐变边框：
           border-top-colors(颜色值)
          圆角边框：
            border-radius：Npx Npx Npx Npx；分别表示四个角的弧度
          图片边框：
             border-image-source:指定边框图片。
             border-image-slice:四个数值对边框图片进行切割

5.使用opacity控制透明度

          opacity：N%；

6.padding和margin相关属性

           padding：设置内填充距离。
           margin：设置外边距距离。