CSS3-背景篇

1. 文本阴影text-shadow

1. text-shadow属性还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片
2. 现在有了css3可以直接使用 text-shadow属性来指定阴影
3. 这个属性可以有两个作用：产生阴影和模糊主体。
4. 这样在不使用图片时能给文字增加质感
5. 语法：

   text-shadow ：x轴偏移 y轴偏移 模糊距离 阴影颜色;
   // (必须)x、y轴取正负值 如5px、-5px
   // (可选)模糊距离必须取正值如：5px
   // (可选)阴影颜色为色值，也可以是rgba透明色
   // 可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。
   

2. 盒子阴影box-shadow

1. box-shadow 属性向边框添加一个或多个阴影

2. 语法：

   box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影;
   

3. 属性：

   1. h-shadow(必需):水平阴影位置。允许负值如：5px
   2. v-shadow(必需):垂直阴影位置。允许负值如：-5px
   3. blur(可选):模糊距离,必须取正值如：5px
   4. spread(可选):阴影尺寸,值越大阴影的扩散面积越大，默认值为0px
   5. color(可选):阴影颜色
   6. 内/外部阴影(可选):外部阴影outset(默认值)  内部阴影inset
   

4. 注意：

   1. 一般跟文字阴影一样写四个值即可：水平 垂直 模糊 颜色
   2. 前面两个属性是必须写的，其余的可以省略
   3. 外阴影为默认的（outset）但是不能写， 想要 内阴影就写inset
   

5. 案例：

   /*给盒子底部底部阴影*/
   box-shadow：0 10px 20px rgba(0,0,0,.1);
   

3. 颜色设置

1. RGBA 说得简单一点就是在RGB的基础上加进了一个Alpha透明度
   语法:
   R：红色值。正整数 | 百分数
   G：绿色值。正整数 | 百分数
   B：蓝色值。正整数 | 百分数
   A：透明度。取值0~1之间

   /*比如红色*/
   background: rgba(255, 0, 0, 1);
   

2. HSLA 色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度
   语法：
   H：Hue(色调,色相)。
          取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)，0(或360)表示红色，120表示绿色，240表示蓝色，
          也可取其他数值来指定颜色。
   S：Saturation(饱和度)。
         取值为：0.0% - 100.0%
   L：Lightness(亮度)。
         取值为：0.0% - 100.0%，50%是平衡值
   A：Alpha透明度。
        取值0~1之间。

   /*比如红色*/
   background: hsla(360, 100%, 50%, 1);
   

4. 背景渐变

1. 概述： 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

2. 渐变可分为线性渐变、径向渐变

3. -webkit-linear-gradient 前面加上浏览器私有前缀-webkit-，起始位置参数不用写to，方向与有to参数相反

4. 线性渐变
   概述： linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

    /*前缀添加在`linear-gradient前面*/
   background:linear-gradient(渐变色的起始位置,起始颜色,结束颜色 )
   /*也可以（渐变色起始位置,颜色、位置,颜色、位置,...）*/
   /* 例如：*/
   background:linear-gradient(to right, red 0%, green 30%, #008c8c 40%, pink 100%); 
   /*百分比表示位置度数*/
   

   参数说明:
   A. 第一个参数表示线性渐变的方向，
       a). to left：设置渐变为从右到左。相当于: 270deg;
       b). to right：设置渐变从左到右。相当于: 90deg;   
       c). to top：设置渐变从下到上。相当于: 0deg;
       d). to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
       f). 也可以直接指定度数，如45deg
   B. 第二个参数是起点颜色,可以指定颜色的位置
   C. 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
   

5. 径向渐变
   概述： radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

   background: radial-gradient(形状, 大小, 坐标, 颜色)
   

   参数说明：
   A. 第一个参数shape：渐变的形状，ellipse表示适配元素大小(宽高不一样的情况下为椭圆形)，circle表示圆形。
     默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
   B. 第二个参数size：渐变的大小，即渐变到哪里停止，它有四个值。 
     a). closest-side：最近边； 
     b). farthest-side：最远边；
     c). closest-corner：最近角； 
     d). farthest-corner：最远角。
     f). 默认是最远的角farthest-corner
   C. 第三个参数position：确定圆心的位置。默认为正中心。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；
     如果只提供一个，第二值默认为50%，即center
     取值：可以赋值坐标，参照元素左上角坐标点如：at 10px 10px
           也可以为关键字：left right top bottom center 记得前面加一个at 
   D. 第四个参数color：指定颜色，可以写多个也可以加上位置如：red 10%,bule 40%...
   F. 前三个参数为可选项
   

6. 重复渐变
   用径向渐变做:

   background:repeating-radial-gradient(形状 大小 坐标，开始颜色 开始位置0%,结束颜色 结束位置	10%,....)
   /*颜色可以写多组*/
   

5. 背景图

1. 设置背景图

   background-image:url("imgs/bg-1.jpg")
   

2. 设置背景平铺

   background-repeat
   a). 默认情况下，背景图会铺满整个页面，背景图大小不够铺满整个页面时，背景图会在横坐标和纵坐标中进行重复；
   b). background-repeat：repeat 默认值，横、纵坐标重复
   c). background-repeat：round  会将图片缩放之后再平铺，达到铺满整个容器的效果
   d). background-repeat：space  图片不会缩放平铺，只会在图片之间产生相同的间距值，达到铺满整个容器的效果
   d). background-repeat：no-repeat（不重复）
   e). background-repeat：repeat-x（只在x轴重复）、y（也一样）**
   

3. 设置滚动容器的背景的行为(是否固定)

   background-attachment
   A. 跟随元素滚动：background-attachment:scroll;
   B. 固定不动：background-attachment:fixed;
   C. 跟随内容滚动：background-attachment:local;
   

4. 设置背景图的尺寸

   background-size
   a). background-size：contain 图片要完整的显示在指定的区域，不能改变图片的比例
   b). background-size：cover 图片撑满整个指定区域，而且比例不变，可能会溢出
   c). background-size：100% 横向撑满，纵向按比例缩放。百分比相对于盒子
   d). background-size：100% 100% 横、纵向撑满，图片比例可能会发生变化。
   f). background-size：x y 可以设置数值代表横、纵向的像素尺寸。
   

5. 设置背景图位置

   background-position
   a). background-position：center 背景图横、纵向居中
   b). background-position：center top 横向居中，纵向靠上
   c). background-position：center bottom 横向居中，纵向靠下
   d). background-position：left center 横向靠左，纵向居中
   e). 预设值： left、bottom、right、top、center（居中）
   f). 也可以用数值或百分比如background-position：10px 10px 表示横、纵坐标离左边、上边边框的距离;
   

6. 设置背景图坐标的原点

   background-origin
   a). background-origin:border-box 从边框开始填充背景，会与边框重叠
   b). background-origin:padding-box 从填充区开始填充背景，覆盖填充盒（为默认值）
   c). background-origin:content-box 从内容区域开始填充
   

7. 设置内容的裁切，控制显示

   background-clip
   a). background-clip:border-box 显示border及以内的内容
   b). background-clip:padding-box 显示padding及以内的内容
   c). background-clip:content-box 只显示内容区
   

8. 速写（简写）background

   A. background：url("imgs/main.jpg") no-repeat 50% 50%/100% fixed #000 顺序为设置图片、不重复、
      位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中
      间加/隔开。有些属性可以不写，不写会按默认值处理
   B. background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
   

9. 有含义的背景图，需要在元素里添加文字

   1. 在网速不好的时候，加载不出来CSS属性的时候，会显示文字；
   2. 在网速正常的时候，能加载CSS属性，则显示图片；
   3. 所以书写代码的时候需要添加文字，然后隐藏文字；
   4. 方法一.文本缩进：text-indent：px，文本不换行：white-space：nowrap；把文本挤出到盒子外面， 
   然后隐藏溢出：overflow：hidden；
   5. 方法二.背景可以覆盖内边距，高度设置为0，padding-top内边距设置为原先高的值，这样背景图正常显示，
   文本就在盒子外面，然后隐藏溢出：overflow：hidden；
   6. 方法三，把文本用span元素包裹起来，然后隐藏span盒子。
   

6. 边框图片

1. 设置边框图片路径

   border-image-source:url("./images/a.jpg");
   /*可以指定边框图片的路径，默认只是填充到容器的四个角*/
   

2. 设置四个方向上的裁切距离

   border-image-slice:27 fill;
   /*第一个参数为数值是四个方向的裁切距离
    第二个参数fill是做内容的内部填充*/
   

3. 设置边框图片的宽度

   border-image-width:27px;
   /*建议：一般设置为边框的宽度
    注意：边框图片的本质是背景，并不会影响元素内容的放置
   内容只会被容器的border和padding影响*/       
   

4. 设置边框图片的平铺

   border-image-repeat:
   /*取值：repeat 直接重复平铺
         round 将内容缩放进行完整的重复平铺
         stretch 拉伸，默认值*/
   

5. 缩写（简写）

   border-image: 图片链接 裁切距离 / 图片宽度 / 设置平铺