CSS3的radial-gradient(径向渐变)

所谓径向渐变，如图下，类似光晕

语法：

radial-gradient(
  [
    [渐变大小]?
    [ at 渐变圆心坐标]?
  ,]?
  颜色[ 开始位置]
  [,颜色[ 开始位置]]+
);

例1：

.ball{width:200px;height:200px;background:-webkit-radial-gradient(#CC3,#3F9,#06C);
}

效果如图下：

例2：

div{width:200px;height:200px;margin:10px;
}
.first{background:-webkit-radial-gradient(#CC3,#3F9 40%,#06C);
}
.second{background:-webkit-radial-gradient(35px 35px,#CC3,#3F9 40%,#06C);
}
.third{background:-webkit-radial-gradient(0px 0px,#CC3,#3F9 40%,#06C);
}

此外，需要增加颜色可直接在后面怼，至于颜色后面的百分可以用来控制色域范围~

这期就到这，我是Daniel

转载于:https://www.cnblogs.com/realdanielwu/p/6289670.html

CSS3的radial-gradient(径向渐变)相关推荐

CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
android 背景切换动画效果代码,关于Android shape gradient背景渐变
百度后,发现渐变色不仅可以根据xml来实现,也可以用java代码来实现,由于目前没有那么多时间,只记录xml实现的方法:以后在记录Java实现的代码. 通过Shape gradient标签来实现首先 ...
CSS3实现径向渐变
径向渐变的基础知识: 径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉). 一.径向渐变的基本语法: background-image:-webkit-gradient(type,x ...
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
Css3: gradient背景渐变
Css3: gradient背景渐变原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状发布时间:2020-07-13 16:23:57 来源:亿速云阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
html5 css3 渐变,CSS3 渐变 — 径向渐变
HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝 ...
CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
CSS3径向渐变radial-gradient实现波浪边框和内倒角
前言大佬给了一张优惠券图片(如下图),我一看,这波浪型的边框和内倒角用css写不出来吧,遂向大佬说明并要ui切图,大佬回答:css3可以实现.好吧,大佬都说可以实现了,还不赶紧去求谷哥,度娘. 实现 ...

CSS3的radial-gradient(径向渐变)

CSS3的radial-gradient(径向渐变)相关推荐

最新文章

热门文章