CSS3中的径向渐变知识点整理

最新推荐文章于 2024-07-11 11:24:40 发布

ranup

最新推荐文章于 2024-07-11 11:24:40 发布

阅读量1.6k

点赞数

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

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

版权

HTML5+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的渐变效果，包括线性渐变和径向渐变的用法。线性渐变允许颜色沿特定方向平滑过渡，而径向渐变则创建从中心向外的颜色辐射效果。文章通过实例展示了如何设置形状、大小、位置以及透明度，并提到了不兼容旧版IE浏览器的问题。此外，还探讨了重复径向渐变的实现方式，帮助开发者创建更丰富的视觉效果。

摘要由CSDN通过智能技术生成

渐变

概念

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

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

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

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

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

IE9及以下不兼容

径向渐变

径向渐变（放射性的效果），效果和线性渐变类似。

不同的是，默认情况下径向渐变的形状根据元素的形状来计算的。

我们可以指定渐变的中心、形状（圆形或椭圆形）、大小。

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape ：形状
- ellipse：椭圆，默认
- circle：圆角
size：大小
- closest-side：近边
- farthest-side：远边
- closest-corner：近角
- farthest-corner：远角，默认
position：位置
- xpx ypx：具体值 (x轴，y轴)
- x% y%：百分比 (x轴，y轴)
- 方位词
- 注意：如果只写一个属性，第二个默认是 50% (center)
color：颜色，至少要写两个，可以写多个

不设置形状和大小

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 100px;
    background-image: radial-gradient(red, yellow);
  }

  .one {
    /* 多颜色 */
    background-image: radial-gradient(red, pink, yellow);
  }

  .two {
    /* 手动分配颜色 */
    background-image: radial-gradient(red 10%, pink 40%, yellow);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
	<div class="two"></div>
</body>

在这里插入图片描述

设置形状

我们也可以设置形状，而shape 参数定义了形状，它可以是 circle (圆形) 或 ellipse (椭圆形，默认)。

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 100px;
    /* 这里设置三个值的原因是，看起来更加直观 */
    /* 圆形 */
    background-image: radial-gradient(circle, red, pink, yellow);
  }

  .one {
    /* 椭圆 */
    background-image: radial-gradient(ellipse, red, pink, yellow);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
</body>

在这里插入图片描述

设置大小

当然我们也可以自定义大小，而size 参数定义了大小

可以设置的值：

closest-side：近边
farthest-side：远边
closest-corner：近角
farthest-corner：远角，默认

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 200px;
    /* 需要设置位置，才能直观分辨 */
    /* 默认大小，farthest-corner 远角 */
    background-image: radial-gradient(farthest-corner at 60% 55%, red, pink, black);
  }

  .one {
    /* closest-corner 近角 */
    background-image: radial-gradient(closest-corner at 60% 55%, red, pink, black);
  }

  .two {
    /* closest-side 近边*/
    background-image: radial-gradient(closest-side at 60% 55%, red, pink, black);
  }

  .three {
    /* farthest-side 远边 */
    background-image: radial-gradient(farthest-side at 60% 55%, red, pink, black);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>

在这里插入图片描述

使用透明度

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

  .one {
    background-image: radial-gradient(transparent, rgba(255, 0, 0, 1));
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
</body>

在这里插入图片描述

重复的径向渐变

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

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

<style>
  div {
    float: left;
    margin: 5px;
    width: 200px;
    height: 100px;
    /* 默认椭圆 */
    background-image: repeating-radial-gradient(red, pink 20%);
  }

  .one {
    /* 多个颜色 */
    background-image: repeating-radial-gradient(red, pink 20%, black 30%);
  }

  .two {
    /* 指定形状、大小和位置 */
    background-image: repeating-radial-gradient(circle closest-side at 60% 55%, red, black 20%);
  }
</style>
<body>
	<div></div>
	<div class="one"></div>
	<div class="two"></div>
</body>

在这里插入图片描述

ranup

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的径向渐变知识点整理

CSS3中的径向渐变知识点整概念渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡。曾经我们只有使用图像来实现颜色的过渡效果，但渐变的出现，可以让用户使用时减少下载的时间和宽带的使用。渐变效果的元素在放大时看起来效果会更好，这是因为渐变是由浏览器自己生成的。渐变分为线性渐变和径向渐变。线性渐变（Linear Gradients）：向下/向上/向左/向右/对角方向径向渐变（Radial Gradients）：由它们的中心定义IE9及以下不兼容
复制链接

扫一扫

专栏目录