资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浅探css3渐变

浅探css3渐变

lieeps / 2026人阅读

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。

css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。

linear-gradient 基本用法

想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。
linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);
linear-gradient函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。先来看一个简单的例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(white, gray);
}

如上图所示，创建一个100*100的方块，从上到到下线性渐变，又白色过渡到灰色，linear-gradient不传位置参数时默认从顶部到底部进行线性渐变，下面来看一个有位置信息的渐变例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(to right, white, gray);
}

位置信息的传递由to关键加上位置，表示向什么方向进行颜色渐变，上面表示由左向右进行颜色渐变，那想向右上角渐变怎么办呢？很简单，linear-gradient(to right top, white, gray)就可以了，那传入角度又是怎么线性渐变的呢？来看个例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, white, gray);
}

这个角度指的是什么呢？新标准中将0deg指向北方，并且顺时针增加，因此在上图当传入角度为0deg时，由下而上进行渐变。

有的时候你可能不想从一开始就出现渐变，想在某个指定的位置开始渐变，这该怎么办呢？来看个例子：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, red, red 80%, gray);
}

我们在希望梯度开始的地方的地方加个同样色值的颜色中间点，就像上面那样，在80%的位置开始渐变

repeating-linear-gradient

这又是个什么函数？这个函数的用法参数和linear-gradient一摸一样，但是它会在所以方向上重复渐变以覆盖其整个容器。不懂什么意思？来看个例子就明白了：

div {
  width: 100px;
  height: 100px;
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

看了例子是不是就一目了然了，在7%的位置开始渐变，渐变到10%的位置，然后重复

简单用法（方格文图案）

话不多说直接上例子：

上面的方案文图案是怎么实现的呢？来看具体样式：

div {
  width: 100px;
  height: 100px;
  background: white;
  background-image:
          linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
          linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
  background-size: 30px 30px;
}

代码是不是很简单呢？实际上就是利用的background-image属性先竖话30*30的格子，像右渐变，在50%的地方渐变到透明色，然后在横画，向下渐变，在50%的地方渐变到透明色，再叠加，是不是很简单呢？赶紧自己去试试吧！

radial-gradient 基本用法

径向渐变用来展示由原点（渐变中心）辐射开的颜色渐变。我们先来看一下radial-gradient的基本语法：
radial-gradient( [ circle || ] [ at ]? ,
| [ ellipse || [ | ]{2}] [ at ]? ,
| [ [ circle | ellipse ] || ] [ at ]? ,
| at ,
[ , ]+ )

position：与background-position或者transform-origin的取值类似，如果没有，取中心点

shape：渐变的形状，取值为circle或者ellipse，默认为ellipse

color-stop：表示某个确定位置的固定色值，包含一个值加上可选的位置值

extent-keyword：用于描述边缘轮廓的具体位置，它的取值：closest-side(渐变中心距离容器最近的边作为终止位置)、closest-corner(渐变中心距离容器最近的角作为终止位置)、farthest-side(渐变中心距离容器最远的边作为终止位置)、farthest-corner(渐变中心距离容器最远的角作为终止位置)

介绍了基本的概念之后，让我们来看一个例子：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(red, green);
}

上面例子是最简单的径向渐变，所有的取值都是默认值，渐变中心默认为容器中心，渐变的形状为圆形

渐变终止位置

接下来让我们两个稍微复杂一点的例子，指定渐变中心和渐变终止位置：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(closest-side circle at 30px 30px, red, green);
}

渐变的起始位置(30, 30)，终止位置位于距离容器最近的边，再来看一个对比的例子，当终止位置位于距离渐变中心最远的边时：

div {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(farthest-side circle at 30px 30px, red, green);
}

多颜色渐变

下面让我们再加点料，加上第三种颜色，并且指定渐变位置：

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: radial-gradient(closest-side circle at 50px 50px, red 20%, green 80%, white);
}

椭圆的径向渐变

上面都是用圆形渐变介绍了渐变用法，接下来简单介绍一下椭圆的径向渐变，来看一个简单例子

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: radial-gradient(ellipse 40px 20px, red, green, white);
}

和圆形渐变有点不一样的地方就在于圆形渐变设置的是圆的半径，而椭圆渐变设置的椭圆的横轴半径和纵轴半径

repeating-radial-gradient

repeating-radial-gradient创建一个原点辐射的重复渐变的图形，和radial-gradient采用的是同样的参数，下面让我们通过一个例子看一下两者之间的差别：

div {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  background-image: repeating-radial-gradient(ellipse 40px 20px, red, green, white);
}

简单应用 
div {
  width: 200px;
  height: 100px;
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0),
  radial-gradient(tan 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

上面的例子很简单的就实现圆点矩阵，关键就是通过background-position设置图层的位置，让两个图层恰
好互补

总结

以上对css3的线性渐变和径向渐变做了简单介绍，想要更好掌握渐变的用法，还是需要更多的实践。
这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏

GPU云服务器 云服务器 浅探 css3 css3气泡 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114222.html

相关文章

  • 浅探前端图片优化

    摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。 性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

    CocoaChina 评论0 收藏0

  • 浅探前端图片优化

    摘要：性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加载卡顿网页加载速度慢等问题，这篇文章将会将我以往对图片的处理做个总结。 性能优化是前端开发必不可少的一环，而图片优化又是性能优化中必不可少的一环，但不知道有多少开发者在网页的开发过程中会注意图片的使用，图片使用不当可能会导致网页加...

    X1nFLY 评论0 收藏0

  • 浅探js深拷贝和浅拷贝

    摘要：接下来就让我们更细致的探究中的深浅拷贝。总结以上对深拷贝和浅拷贝做了简单的介绍，在深拷贝的实现上也只介绍了最简单的实现形式，并未考虑复杂情况以及相应优化，想要对深拷贝有更深入的了解，需要大家花时间去深入研究，或者可以关注我后续文章的动态。 对象和数组的拷贝对我来说一直都是一个比较模糊的概念，一直有点一知半解，但是在实际工作中又偶尔会涉及到，有时候还会一不小心掉坑里，不知道大家有没有同样...

    habren 评论0 收藏0

  • 浅探webpack优化

    摘要：是对的转译结果进行缓存，之后的进行构建时，都会去尝试读取缓存来避免高耗能的重新转译过程，可以指定一个缓存目录或者指定为，为时将使用默认的缓存目录。这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏 由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架...

    Achilles 评论0 收藏0

  • css3 渐变

    摘要：渐变渐变分为两种渐变，一种是线性渐变，一种是径向渐变线性渐变线性渐变为向上，向下，向左，向右两种渐变方式。线性渐变由一个轴即梯度线构成。 css3ps: css越来越真正的像一门语言了，css已经有变量了，刚刚看到文档中。一个实验性质的功能。 渐变 渐变分为两种渐变，一种是线性渐变，一种是径向渐变 线性渐变 线性渐变为向上，向下，向左，向右两种渐变方式。 linear-gradient...

    FrozenMap 评论0 收藏0

发表评论

登陆后可评论

0条评论

lieeps

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<