CSS-渐变

CSS3

渐变背景

使用场景：在网页设计的过程中，我们设置网页背景的时候有可能不是一个纯色的背景，可能是一个渐变的背景。

CSS3提供了两种渐变：线性渐变和径向渐变

渐变：其实就是一个”图像“，所以使用background-image属性

线性渐变

• 默认从上到下，至少有两个颜色，通过linear-gradient来设置

• 线性渐变是渐变线（方向）和色标组成

• 语法：

  /* linear-gradient 是用于创建一个线性渐变的 "图像" */
  baclground-image:linear-gradient(颜色1，颜色2,....);
  backgound-image:linear-gradient(to 结束的方向，red，green)
  baclground-image:linear-gradient(颜色1 百分比，颜色2 百分比,....);
  baclground-image:linear-gradient(渐变线方向，颜色1 位置， 颜色2   位置， 颜色3   位置)；
  渐变线方向：  to 方向单词    角度deg
  色标：
  	颜色：十六进制，rgb ，rgba，单词
  	位置：百分比，或者像素
  

方向（渐变线）

• 用来控制渐变的方向

• 原理：

  渐变线是从渐变盒子中心点向两个方向径向延伸，起点和终点是渐变线与经过渐变盒子的一个角的垂直线的相交点。

​

• 方向取值范围

  • 单词：利用to来指定渐变线结束的方向，top bottom left right

    语法：

    backgound-image:linear-gradient(to 结束的方向，red，green)
    

    • to top—— 0deg
    • to bottom（默认值） —— 180deg或者 -180deg
    • to left —— -90deg或 270deg
    • to right—— 90deg或-270deg
    • to top left—— -45deg
    • to top right —— 45deg
    • to bottom left —— -135deg
    • to bottom right —— 135deg （-225deg）

  • 角度方向：deg单位

    角度可以设置正数或者负数。

    0deg表示沿着中心线由下向上的方向，类似y轴的负方向，正数角度代表顺时针旋转多少度，负数代表逆时针旋转

    语法：

    background-image:linear-gradient(角度，red,green);
    

    

色标

​ 色标=（颜色+位置）

• 色标包含一个颜色和一个位置，用来控制渐变的颜色变化

• 取值：

  • 颜色：单词，十六进制，rgb，rgba（设置背景颜色可以透明）
  • 位置：百分比，像素px

• 注意：

  • 渐变没有写位置值，只有颜色，均匀渐变效果；

    background-image: linear-gradient(green,red);
    等价于
    background-image: linear-gradient(green 0%,red 100%);
    
    background-image: linear-gradient(green,red，pink);
    等价于
    background-image: linear-gradient(green 0%,red 50%,pink  100%);
    

  • 渐变至少需要写两个色标，如果色标中首尾两个默认不写，是0%和100%；

  • 当然也可以自己定义位置值：

      background-image: linear-gradient(red 50%,green 80%,yellow 90%);  
    

    如果渐变有三个值，第一个值位置设置50%，第二个设置80%，第三个设置90%，0%-50%默认第一个种颜色的纯色，50%-80%是第一种颜色到第二颜色的渐变，80%-90%是第二种颜色到第三种颜色的渐变，90%-100%是第三种颜色的纯色。

  • 色标可以无数个，可以设置多种颜色

重复线性渐变

可以实现线性渐变的重复效果，使色标在渐变盒子中按照方向径向无限重复。

注意：起始值必须是0开始

• 语法：

  background-image:repeating-linear-gradient(red 0%,green 20%);
  

兼容问题

 /* 针对chrome或者safira识别 */
background-image: -webkit-linear-gradient(red,green);
/* 针对firefox */
background-image: -moz-linear-gradient(red,green);
/* 针对opera */
background-image: -o-linear-gradient(red,green);
/* 针对ie浏览器识别的前缀 */
background-image: -ms-linear-gradient(red,green);
/* 通用的样式 */
background-image: linear-gradient(red,green);

出现前缀的原因：W3c没有发布正式规范时，发布草案里提出新属性，各个厂商为了和之后发布的正式规范区分，就将自己的添加前缀来进行区分。当规范发布以后，各个浏览器就会逐步使用w3c规范的属性。

ie9及以下浏览不支持线性渐变（使用ie提供渐变滤镜）

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');

• GradientType：代表渐变的方向，0代表垂直方向，1代表水平方向，只有两个方向。
• startColorstr：代表开始颜色，endColorstr代表结束的颜色
• #ff0000ff：代表颜色，格式是#aarrggbb aa代表透明度 rrggbb代表十六进制

照片滤镜

**注意：**background-image可以同时引入图片和渐变，中间使用逗号隔开，写在前面的盖住后面的，可以实现照片滤镜的效果

.box{
            width: 500px;
            height: 319px;
            border: 1px solid red;
            /* background-image: url(img/gyy.jpg);
            background-image: linear-gradient(transparent , red); */
            /* background-image可以同时引入图片和渐变,中间用逗号隔开，前面会盖住后面的 */
            background-image: linear-gradient(transparent ,red),url(img/gyy.jpg);
        }
<div class="box">
        <!-- <img src="img/gyy.jpg" alt=""> -->
    </div>

 background-image:linear-gradient(rgba(255,255,255,0.5 ),rgba(255,255,255,0.8)),url("./img/gyy.jpg");

透明度

• opacity:设置盒子透明度，取值0-1 ，0代表完全透明，1代表不透明
  • 设置0时，当前盒子本身的效果和里面的所有元素都会透明
  • 设置0时，盒子完全透明，但是盒子还在原来的位置不变
• rgba():设置颜色的透明度，a代表透明，取值0-1 ，0代表完全透明，1代表不透明
  • rgba只作用于当前的属性的颜色透明
• transparent：颜色完全透明

径向渐变

径向渐变其实就是椭圆渐变，圆是一种特殊的椭圆。径向渐变从圆心出发，沿着半径径向渐变，以椭圆的形式向外径向发散出去。

径向渐变无法实现ie兼容，只有ie10以上 支持标准写法

径向渐变由两部分构成：

• 椭圆：用来控制径向渐变的大小，形状，位置。

• 色标：每个色标都包含一个颜色和一个渐变位置，用来控制渐变颜色变化

• 标准语法：

  background-image:radial-gradient(  大小   形状  at  x轴  y轴，色标1，色标2 )
  

圆心

默认值center center，盒子的中心点

 /* 圆心 通过at来控制圆心的位置 其中0px 0px 盒子的左上角，center center是默认值，中心点*/
            /*
background-iamge:radial-gradient(at x轴  y轴,red,green)

• x轴：left | |right | center |像素 | 百分比
• y轴：top | center | bottom | 像素 | 百分比

形状

• ellipse：椭圆，默认值，
• circle：正圆

大小

​ 通常需要搭配圆心位置来调整

• farthest-corner：默认值，半径从圆心到最远角
• closest-corner：半径从圆心到最近角
• farthest-side：半径从圆心到最远边
• closest-side：半径从圆心到最近边

重复径向渐变

background-image:repeating-radial-gradient(red 0% ,green  30%);

• 注意，色标的首尾不能同时在0%和100%的位置，要留空间给渐变重复

•     <style>
          .box{
              width: 1000px;
              height: 1000px;
              margin: auto;
              /* 重复径向渐变 */
              background-image: repeating-radial-gradient(pink 0px,pink
               20px , tomato 20px , tomato 40px);
          }
      </style>
  </head>
  <body>
      <div class="box"></div>
  </body>
  

阴影

盒子的阴影

box-shadow设置盒子的阴影，IE对属性兼容不是很好

• 语法

  box-shadow:X轴的偏移量  Y轴的偏移量  阴影效果虚化程度   阴影大小   颜色 
  box-shadow:10px       10px           20px           20px    rgba(0,0,255,0.5);
  
  设置两个值，阴影效果和阴影大小可以默认不写 
  box-shadow:10px 10px rgba(0,0,255,0.5);
  
  /inset将外部阴影 (outset) 改为内部阴影 
  box-shadow:10px 10px rgba(0,0,255,0.5) inset;
  

• box-shadow可以设置多层阴影，多层阴影中间使用逗号隔开

• box-shadow:10px 10px 20px 20px rgba(0,0,255,0.5),
  	-10px 10px 20px 20px rgba(255,0,255,0.5),
  	10px -10px 20px 20px rgba(255,0,0,0.5);
  

例如：

    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            background-color: pink;
            /* 设置盒子阴影 */
            /*  x轴偏移量  y轴偏移量  阴影的虚化程度  阴影的大小  颜色； */
            box-shadow: 5px 10px 15px 10px  red;
            /* 多层阴影 */
            /* box-shadow: 5px 0px 15px 10px red,0px 15px 10px 10px green; */
        }
        .box:hover{
            /* box-shadow: 2px 3px 5px 1px #cccccc; */
              box-shadow: 5px 0px 15px 10px red,0px 15px 10px 10px green;
        }
    </style>
     <div class="box"></div>

文字阴影

text-shadow设置文字阴影

• 语法：

  text-shadow：x轴偏移量   y轴偏移量  阴影虚化程度  颜色；
  text-shadow:2px         3px       5px         red;
  
  

.box{
            width: 350px;
            height: 150px;
        
            font-size: 50px;
            /* 文字阴影 X轴的偏移量   Y轴的偏移量   阴影效果虚化程度0~无穷   颜色 ;*/
            /* text-shadow: 5px 10px 2px red; */
           
            text-shadow: 1px 1px 2px black,-1px -1px 2px white; /* 凸起的文字 */
            color:slategray;
            background-color: slategray;
            float: left;

        }
        .box2{
            width: 400px;
            height: 150px;
            /* border: 1px solid red; */
            font-size: 50px;
            /* 文字阴影 X轴的偏移量   Y轴的偏移量   阴影效果虚化程度0~无穷   颜色 ;*/
            /* text-shadow: 5px 10px 2px red; */
            text-shadow: -1px -1px 2px black,1px 1px 2px white; /* 凹陷的文字 */
            color:slategray;
            background-color: slategray;
            float: left;

        }

圆角

• border-radius设置圆角

• 取值

  简写形式：水平半径和垂直半径默认是相等的
  一个值：四个角
  border-radius：10px；  
  两个值：左上右下   右上左下
  三个值：左上   右上左下  右下
  四个值：左上  右上   右下   左下
  
  标准写法：
  /前面代表四个方向的水平半径，/后面代表四个方向的垂直半径
  border-radius：10px  10px  10px  10px  / 10px 10px 10px 10px;
  
  

水平半径和垂直半径

原理：

水平半径和垂直半径一起绘制了圆角的弧度，每个盒子都有四个角，每个角可以单独控制它圆弧程度

水平半径和垂直半径共同形成了圆弧

内半径和外半径

当border-radius的值小于boder时，我们边框内部没有圆角效果，

当border-radius的值大于border时，边框里面和外部的圆角不一样，外部采用设置的圆角半径大小，这个圆角半径称为外半径，里面采用border-radius减去border的宽度作为半径来绘制圆弧，这个半径称为内半径。

内半径 = 外半径 - border

圆角应用

• 胶囊的绘制：前提条件，盒子的宽高不一样，border-radius取宽高最小值的一半以上
• 绘制正圆：盒子宽高一样，设置border-radius：50%；
• 绘制椭圆：盒子宽高不一样，设置border-radius：50%；