CSS3渐变

最新推荐文章于 2024-08-21 09:04:44 发布

VVVGG

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量1.2k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/VVVZCS/article/details/82781648

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

以前我们如果想要做到一个颜色到另一个颜色的渐变（Gradients）效果，需要用ps之类的应用程序做出一张背景图片，然后放到元素上，这样子不仅麻烦，而且不利于代码的维护，当用户界面大小发生改变时，显示效果也不好

CSS3提供给了我们一种渐变绘制方式，这样我们就不需要去下载文件之类的，当界面发生改变之后，由于是浏览器去绘制的，显示效果也比较好

线性渐变（Linear Gradients）向上 | 向下 | 向左 | 向右 | 对角线

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

默认从上到下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 20px;
      width: 100px;
      height: 100px;
      padding: 20px;
      background: linear-gradient(red, blue);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

从左向右

对角（从右上角到左下角）

如果你不想使用这些方向，也可以使用自己的定义的角度

语法：

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

我们发现red是从底部开始，顺时针走了一圈，这样记比较好记一点

需要注意的是：

1，颜色不仅只可以填写两个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS3</title>
  <link rel="stylesheet" href="">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    div{
      margin: 20px;
      width: 500px;
      height: 100px;
      padding: 20px;
      background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

2，也可以对透明度进行渐变

--------------------------------------------------------------------------------------------------

径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：

background: radial-gradient(center, shape size, start-color, ..., last-color);