CSS3中的线性渐变知识点整理

ranup

已于 2022-05-18 20:01:03 修改

阅读量474

点赞数

分类专栏： HTML5+CSS3 文章标签： css3 css html

于 2022-05-18 19:50:00 首次发布

本文链接：https://blog.csdn.net/m0_57533638/article/details/124849439

版权

HTML5+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

线性渐变

文章目录

线性渐变

概念

渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡。

曾经我们只有使用图像来实现颜色的过渡效果，但渐变的出现，可以让用户使用时 减少下载的时间 和 宽带的使用 。

渐变效果的元素在放大时看起来效果会更好，这是因为渐变是由浏览器自己生成的。

渐变分为 线性渐变 和 径向渐变。

线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）：由它们的中心定义

IE9及以下不兼容

线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：可选，方向
color：颜色，至少要写两个，可以写多个

比如：

/* to top、to bottom、to left、to right、to left top等等 */
/*  xxxdeg deg表示度数*/
/* 
	可以同时指定多个颜色，多个颜色默认情况下平均分配
   也可以手动指定渐变的分布情况
*/

/* 从上往下，红色渐变到黄色 */
linear-gradient(red, yellow);
  
/* 从右下往左上、从红色渐变到黄色 */
linear-gradient(to left top, red, yellow);
 
/* 渐变角度为45度，从蓝色渐变到红色 */
linear-gradient(45deg, red, yellow);

/* 从下往上，从红色开始渐变、到高度40%时开始由蓝色渐变、最后以黄色结束 */
linear-gradient(0deg, red, blue 40%, yellow);

在这里插入图片描述

不设置 direction

不写方向颜色默认是从上往下过渡

<style>
  div {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(red, yellow);
  }
</style>
<body>
	<h3>颜色渐变：从上往下</h3>
	<div></div>
</body>

在这里插入图片描述

多个颜色

<style>
  div {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(red, pink, blue);
  }
</style>
<body>
	<div></div>
</body>

在这里插入图片描述

设置 direction

1.用 to 去指明要渐变的方向

线性渐变 - 从左到右

<style>
  div {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to right, red, yellow);
  }
</style>
<body>
	<h3>颜色渐变：从左往右</h3>
	<div></div>
</body>

在这里插入图片描述

线性渐变 - 对角

<style>
  div {
    width: 200px;
    height: 100px;
    background-image: linear-gradient(to right bottom, red, yellow);
  }
</style>
</head>

<body>
	<h3>颜色渐变：从左往右下</h3>
	<div></div>
</body>

在这里插入图片描述

2.设置角度

角度是指水平线和渐变线之间的角度，在 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
在这里插入图片描述

有些旧浏览器显示的是：0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。

我们可以使用换算公式：x = 90 - y ，其中 x 为标准角度，y为非标准角度。

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 100px;
    /* 0deg 默认是从下往上 */
    background-image: linear-gradient(0deg, red, yellow);
  }

  .one {
    /* 90deg 从左往右 */
    background-image: linear-gradient(90deg, red, yellow);
  }

  .two {
    /* 180deg 从上往下 */
    background-image: linear-gradient(180deg, red, yellow);
  }

  .three {
    /* -90deg 从右往左 */
    background-image: linear-gradient(-90deg, red, yellow);
  }

  .four {
    /* -90 deg 指定颜色分配 从右往左 */
    background-image: linear-gradient(-90deg, red, blue 40%, yellow);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
</body>

在这里插入图片描述

使用透明度

使用透明度的操作和上面还是一样的，只是把颜色变成了透明效果。

<style>
  div {
    margin: 5px;
    width: 200px;
    height: 100px;
    /* 红色，透明度逐渐增大 */
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

  }

  .one {
    background-image: linear-gradient(to right, transparent, rgba(255, 0, 0, 1));
  }
</style>
<body>
	<h3>颜色渐变：从左往右</h3>
	<div></div>
	<div class="one"></div>
</body>

在这里插入图片描述

重复的线性渐变

语法：background-image: repeating-linear-gradient(direction, color1, color2, ...);

重复的线性渐变和不重复的线性渐变一样，只是需要手动指定颜色分配，这样才会出现重复样式。

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 100px;
    /* 默认是上往下 */
    background-image: repeating-linear-gradient(red, yellow 20%);
  }

  .one {
    /* 多个颜色 */
    background-image: repeating-linear-gradient(red, blue 20%, yellow 40%);
  }

  .two {
    /* 指定方向，从左往右 */
    background-image: repeating-linear-gradient(to right, red, yellow 20%);
  }

  .three {
    /* 指定颜色分配 从左往右 */
    background-image: repeating-linear-gradient(90deg, red, blue 30%, yellow 40%);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>