CSS3中的径向渐变

径向渐变（radial-gradient）
径向渐变指从一个中心点开始沿着四周产生渐变效果。由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

当我们为一个渐变设置多个颜色时，它们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。像素设置的大小指的是从渐变圆心向外延伸的距离。

径向渐变语法：

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

其中各种属性的意思如下：

// 圆心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> |
<percentage> | top | center | bottom ]?  //默认处于中心点
// 渐变形状
<shape> = circle | ellipse  //默认是ellipse
// 渐变大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 渐变颜色及颜色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?

上面需要详细讲明一下

我们在渐变定义时可以直接定义渐变的形状，但除了这种方式，还可以通过为size传入具体值在确定渐变形状，具体说明如下：

1、当传入一个大小参数size或者两个相同值得size时，则表示该渐变形状是圆。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2、当传入两个大小不同的size参数时，则表示该渐变形状为椭圆。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

当然，我们也可以在声明渐变形状的同时在其后紧跟渐变大小，中间用空格隔开，效果与上面相同，例如

background: radial-gradient(circle 60px,#f00 0,#ff0 100%);
background: radial-gradient(ellipse 100px 60px,#f00 0,#ff0 100%);

需要特别注意的是，若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数，个人认为或许是因为圆形半径若为百分数的话就无法确定是以元素的宽为标准还是以高为标准了。

上面定义size除了给定具体值或使用百分比之外，还可以使用extent-keyword，extent-keyword的值有如下四个：

closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

下面就以closet-side为例

background: radial-gradient(circle closest-side at 100px 100px,#f00 0,#ff0 100%);

可以看到渐变圆与容器最近的边相切，其余三个值也同理如上。

除了size需要注意之外，position也需要简单说明一下。

position用于定义渐变形状圆形位置，它的值可以使具体值，百分比或方位值（left、right、top、bottom、left top、top right、bottom left、bottom right），这里主要说一下几个注意点。

1、当在position缺省的额情况下，默认渐变形状处于容器的中心点。

2、当为position只给定一个具体值或百分比时，则其表示在水平方向上所处位置，而垂直方向上默认为50%，如下。

background: radial-gradient(circle 60px at 70px,#f00 0,#ff0 100%);

3、当为position只给定一个方位时，则表示圆心在该方位方向上的值为0,而与其垂直的方向上则默认50%，如下。

background: radial-gradient(circle 60px at left,#f00 0,#ff0 100%);

除上面要注意的之外，还需要注意如果size是 extent-keyword中的closest-side或closest-corner时，则position不能是方位值，因为方位值默认在一个或两个方向得我位置为0（例如left水平方向为0，left top 水平垂直方向上为0），所以不存在最近边或角相切的情况，当然设置具体值为0或百分比为0%时也要注意这种情况。

background: radial-gradient(circle closest-side at 0px 50px,#f00 0,#ff0 100%);

可以看到上面没呈现出任何效果。

————————————————————————————

版权声明：本文为博主[葉無聞]原创文章，如有侵权请联系删除。
本文链接：https://blog.csdn.net/HU_YEWEN/article/details/90604792

CSS3中的径向渐变相关推荐

CSS3中的径向渐变知识点整理
渐变概念渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡. 曾经我们只有使用图像来实现颜色的过渡效果,但渐变的出现,可以让用户使用时减少下载的时间和宽带的使用 . ...
unity天空盒渐变_CodeGo.netgt;如何使Unity中的径向渐变天空盒？
好的,我是空盒的新手,在尝试实现RADIAL渐变空盒时遇到一些问题.我有一个径向渐变着色器,但是当我将其作为天空盒放置时,在两种颜色之间插值的部分过于放大,这意味着您根本无法真正分辨出其渐变. 我认为 ...
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
CSS3的radial-gradient(径向渐变)
所谓径向渐变,如图下,类似光晕语法: radial-gradient( [ [渐变大小]? [ at 渐变圆心坐标]? ,]? 颜色[ 开始位置] [,颜色[ 开始位 ...
css好看的html径向渐变,CSS3径向渐变
上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
css3渐变中的,css3 中的渐变
虽说css3 都已经使用多年了,但是关于css3的渐变用的很少.今天遇见了,就学习了一下. 首先我们打开ps,新建一个画布,选择渐变工具,这个时候我们能够看到顶栏上面的渐变类型如下第一个我们选中的是 ...
一文搞懂 CSS3 中的渐变到底怎么玩
古之立大事者,不唯有超世之才,亦必有坚忍不拔之志--苏轼写在前面今天在做案例的时候,用到了 CSS3 的渐变,可是用到的时候却发现渐变的语法已经忘了,于是就有了这篇博客. 文章目录写在前面什么 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...

CSS3中的径向渐变

CSS3中的径向渐变相关推荐

最新文章

热门文章