渐变

概念

渐变 (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>

CSS3中的径向渐变知识点整理相关推荐

CSS3中的径向渐变
径向渐变(radial-gradient) 径向渐变指从一个中心点开始沿着四周产生渐变效果.由其中心点.边缘形状轮廓及位置.色值结束点(color stops)定义而成. 当我们为一个渐变设置多个颜色 ...
CSS/HTML 如何在网页中添加空格(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
unity天空盒渐变_CodeGo.netgt;如何使Unity中的径向渐变天空盒？
好的,我是空盒的新手,在尝试实现RADIAL渐变空盒时遇到一些问题.我有一个径向渐变着色器,但是当我将其作为天空盒放置时,在两种颜色之间插值的部分过于放大,这意味着您根本无法真正分辨出其渐变. 我认为 ...
CSS3的radial-gradient(径向渐变)
所谓径向渐变,如图下,类似光晕语法: radial-gradient( [ [渐变大小]? [ at 渐变圆心坐标]? ,]? 颜色[ 开始位置] [,颜色[ 开始位 ...
linux程序设计知识点整理,笔试面试中C/C++重要知识点整理
4. 类与面向对象编程 4.1 类接口与实现的概念: 每个类都定义了一个接口(可以不是很确切的理解为类中访问级别为public的函数为接口)和一个实现.接口由使用该类的代码需要执行的操作组成.实现 ...
css好看的html径向渐变,CSS3径向渐变
上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
css3渐变中的,css3 中的渐变
虽说css3 都已经使用多年了,但是关于css3的渐变用的很少.今天遇见了,就学习了一下. 首先我们打开ps,新建一个画布,选择渐变工具,这个时候我们能够看到顶栏上面的渐变类型如下第一个我们选中的是 ...

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

渐变

概念