CSS3径向渐变radial-gradient实现波浪边框和内倒角

王岩威发布于2019-08-30 15:55 / 1689人阅读

摘要：表示圆形渐变，说的简单点就是画一个圆。表示容器最右边，表示容器最上边，换言之就是右上角。实现波浪边框上代码，增加一个样式即可此处没有字样，表示原点在容器中心位置，，表示半径范围内是颜色，半径到范围内是颜色，半径大于是颜色。

前言

大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实现了，还不赶紧去求谷哥，度娘。

实现内倒角

上代码，然后解释代码

重点解释radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)这个样式是干嘛的。

circle表示圆形渐变，说的简单点就是画一个圆。画圆就要知道原点。

circle at right top 中的right top就是原点位置。这里原点位置是相对于容器的坐标。right表示容器最右边，top表示容器最上边，换言之就是右上角。

circle at right top 后面的#fff, #fff 10px, transparent 11px就是从原点开始各种颜色渐变的长度。

代码#fff, #fff 10px, transparent 11px中第一个#fff表示原点处为#fff颜色，#fff 10px表示距离原点半径10px这段距离都是#fff颜色，transparent 11px表示距离原点10px到11px都是transparent颜色，由于没有设置其他颜色，所以距离原点11px以后都是transparent颜色。

总结radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角为原点画圆，半径10px范围内是#fff颜色，半径大于10px范围内都是transparent颜色。

这样在右上角就形成了内倒角

同理 radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解释了。

实现波浪边框

上代码，增加一个css样式即可

background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); 此处没有 at right top字样，表示原点在容器中心位置，#fff, #fff 4px, transparent 5px，表示半径4px范围内是#fff颜色，半径4px到5px范围内是transparent颜色，半径大于5px是transparent颜色。这样就有一个直径为8px的#fff颜色的圆位于容器(这里的容器是:after)中心。

(背景蓝色是为了演示效果)

再加上background-size: 10px 10px;设置背景大小为宽10px高10px，这样就能实现多个直径为8px的#fff颜色的圆。

(背景蓝色是为了演示效果)

left: -5px; 向左偏移 5px，使:after只有一半在.radial-gradient容器内

最后附上效果图

总结

实现内倒角其实是画一个#fff颜色的圆，圆只有四分之一在容器内

实现波浪边框其实是画多个#fff颜色的圆，圆只有一半在容器内

参考文献：
10个demo示例学会CSS3 radial-gradient径向渐变
CSS-论css如何纯代码实现内凹圆角

超融合服务器混合云边框渐变html js实现头部滑动渐变倒角径向基函数

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

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

用纯css来实现一个优惠券

摘要：关于径向渐变的具体使用可以参考张鑫旭的文章径向渐变语法及辅助理解案例则那么怎样实现我们要的效果呢我们先看看径向渐变的语法径向渐变由它的中心定义。查看原文可以有更好的排版效果哦前言我们在平时的网页中，经常会见到这样的优惠券或者其他的券（特征就是会有反方向的圆角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
浅探css3渐变

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要...

lieeps 2019-08-29 17:17 评论0 收藏0
【css3学习系列】之box-shadow,radial-gradient,linear-gradi

摘要：不在指定渐变区域的，以距离其最近的颜色填充。设置渐变为从右到左。这是默认值，等同于留空不写。最后奉上一碗纯拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

LdhAndroid 2019-08-30 15:45 评论0 收藏0
CSS斜切角

摘要：问题斜切角在设计和印刷中是相当受欢迎的样式。当斜切角只存在元素的一侧，并且每个都占据元素的高度的时候，一个箭头的形状产生了，这在按钮和面包屑导航中非常受欢迎。现在，假设我们需要两个斜切角，左右下角分别一个。问题斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这种效果...

番茄西红柿 2019-04-23 13:39 评论0 收藏0