CSS3(十一) CSS3 渐变

CSS3

发布日期: 2020-05-06

更新日期: 2020-05-24

文章字数: 929

阅读时长: 4 分

阅读次数:

渐变

指的是从一种颜色慢慢过渡到另外一种颜色
渐变必须加前缀。-webkit- -moz-
渐变只能用在 background 上面

渐变的语法结构

线性渐变的格式:
- background: -webkit-linear-gradient( [<起点> ||<角度>],点,点…)
IE(IE9 以下)
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’,endColorstr=’#ff0000’,GradientType=’1’);
参数
- 起点:从什么方向开始渐变,默认:top
- left,top,left top,right,right top,等等
- 角度: 从什么角度开始渐变
- xxx deg 的形式(正数表示逆时针旋转。可以拿 0deg 最对比)
点: 渐变的颜色和位置
- black 50%位置可选

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>CSS3文本超出</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      background: -webkit-linear-gradient(left top, red 20px, blue 40px);
    } /*圆形*/
    .box2 {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      background: -webkit-linear-gradient(30deg, red, green);
    }
    .box3 {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      background: -webkit-linear-gradient(30deg, red 30px, green 50px);
    }
    .box4 {
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
      background: -webkit-linear-gradient(30deg, red 20%, green 50%);
    }
  </style>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
  </body>
</html>

线性渐变实例

最简单
red ,green
从上到下

.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background: -webkit-linear-gradient(red, green);
}

起点位置
- left top , red , green
- 30deg ,red, green
  - 逆时针为正

.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background: -webkit-linear-gradient(left top, red 20px, blue 40px);
}
.box4 {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background: -webkit-linear-gradient(30deg, red 20%, green 50%);
}

repeating-linear-gradient :表示重复渐变

.box3 {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background: -webkit-repeating-linear-gradient(30deg, red 30px, green 50px);
}

也可以配合 rgba
top,rgba(255,255,255,1) ,rgba(255,255,255,0)
加入背景图片
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0)), url(a.gif) no-repeat

简单例子鼠标放上去出现类似滚动的特效

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>CSS3文本超出</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .box1 {
      width: 200px;
      height: 30px;
      margin: 50px auto;
      border: 1px solid #ccc;
      background: -webkit-repeating-linear-gradient(
        -30deg,
        red 30px,
        green 50px
      );
      transition: 2s;
    }
    .box1:hover {
      background-position: 300px;
    }
  </style>
  <body>
    <div class="box1"></div>
  </body>
</html>

线性渐变—IE 兼容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>线性渐变——IE兼容</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background: -webkit-linear-gradient(red, blue);
        background: -moz-linear-gradient(red, blue);
        background: linear-gradient(red, blue);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

径向渐变(了解就好)

radial-gradient(<起点>||<角度>,<形状>,点 1,点 2,….)
起点:可以是关键字(left,top,right,bottom),具体数值或百分比
形状 ellipse,circle
大小:具体数值或百分比也可以是关键字(最近端,最近角,最远端,最远角,包含或者覆盖)
(closest-side,closest-corner,fathest-sice,farthest-corner,contain or cover)
特别注意火狐目前只支持关键字

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>径向渐变</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        float: left;
        margin: 10px;
      }
      .box:nth-child(1) {
        background: -webkit-radial-gradient(
          100px 50px,
          closest-side,
          red,
          blue
        );
      }
      .box:nth-child(2) {
        background: -webkit-radial-gradient(
          100px 50px,
          closest-corner,
          red,
          blue
        );
      }
      .box:nth-child(3) {
        background: -webkit-radial-gradient(
          100px 50px,
          farthest-side,
          red,
          blue
        );
      }
      .box:nth-child(4) {
        background: -webkit-radial-gradient(
          100px 50px,
          farthest-corner,
          red,
          blue
        );
      }
      .box:nth-child(5) {
        background: -webkit-radial-gradient(100px 50px, contain, red, blue);
      }
      .box:nth-child(6) {
        background: -webkit-radial-gradient(100px 50px, cover, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>