CSS3径向渐变radial-gradient实现波浪边框和内倒角
前言
大佬给了一张优惠券图片(如下图),我一看,这波浪型的边框和内倒角用css写不出来吧,遂向大佬说明并要ui切图,大佬回答:css3可以实现。好吧,大佬都说可以实现了,还不赶紧去求谷哥,度娘。
实现内倒角
上代码,然后解释代码
<div class="radial-gradient"></div>
<style>
.radial-gradient {width: 200px;height: 100px;position: relative;background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);background-color: red;
}
</style>
重点解释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样式即可
<style>
.radial-gradient:after {content: '';position: absolute;top: 0px;bottom: 0px;left: -5px;width: 10px;height: 100%;background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);background-size: 10px 10px;
}
</style>
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如何纯代码实现内凹圆角
CSS3径向渐变radial-gradient实现波浪边框和内倒角相关推荐
- html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状 发布时间:2020-07-13 16:23:57 来源:亿速云 阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- css好看的html径向渐变,CSS3径向渐变
上次说到CSS3中的线性渐变,表面上看起来似乎有些复杂,但是逐条分解下来其实也没有那么难理解,总结下来无外乎就三点:颜色.方向和位置.那么今天所要讲到的径向渐变相对来说会更复杂一些,不过没有关系,我们 ...
- 用css3径向渐变制作花纹背景
我们可以通过多种css3渐变的叠加制作各种各样好看的花纹 css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变. 制作格子花纹: 代码如下: .bg{width: 120px;height: 2 ...
- CSS3实现径向渐变
径向渐变的基础知识: 径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉). 一.径向渐变的基本语法: background-image:-webkit-gradient(type,x ...
- 聊一聊CSS3的渐变——gradient
关于渐变 时下,渐变(gradient)效果在页面设计中已经变得越来越常见了.而且现在的CSS3对于渐变的支持也已经足够的丰富了.虽然我们可能使用过CSS3中的line-gradient属性或radi ...
- css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
- CSS3渐变属性:线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
- html5 css3 渐变,CSS3 渐变 — 径向渐变
HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色不再沿着一条直线轴变化,而是从一个起点朝 ...
最新文章
- OpenCL™(开放计算语言)概述
- SparkSQL Spark on Hive Hive on Spark
- iOS学习笔记16-SQLite应用
- 【任务脚本】0528京东618叠蛋糕任务脚本全自动脚本,京东任务全自动程序稳定运行,向大神致敬...
- caffe学习笔记17-find-tuning微调学习
- .net Reflection(反射)- 二
- 高中计算机课程打字网址,信息课
- Liferay 中Minifier Filter的minifyCss 奥秘窥探
- 1090 Highest Price in Supply Chain (25 分)(模拟建树,找树的深度)牛客网过,pat没过...
- 5 万条微信语音升入太空;阿里京东否认停止社招;雷军开怼华为 | 极客头条...
- aspnet实现搜索查询_C#算法设计查找篇之01-顺序查找
- Liunx 项目部署及域名访问
- 前后端分离的微信小程序--校园二手交易平台
- Kong的插件:Request Size Limiting
- 华为云桌面远程办公,真香!
- c#设计简单飞机行李托运计费系统
- 为什么学习帕拉卡3D动画编程要从搭建开始?
- 为什么滴滴司机“恨”滴滴?
- 关于数字反转题的思考
- seaborn 0.9 文档翻译活动期待大家的参与~
热门文章
- c语言按键中断程序,单片机C语言代码:外部中断,按下中断按键LED不亮,LED1正常亮...
- safari 浏览器提示添加到主屏幕_Safari浏览器的几个小技巧你掌握了吗?
- python redis pipeline 堆积_Redis Pipeline python
- java jnlp 签名_JAVA JNLP组件数字签名制作步骤
- python怎么后撤步_你的后撤步用对了吗? | 后撤步的目的
- apex图表使用饼图居中_还在用单饼图展示Excel数据?一分钟学会制作复合饼图
- vue3中v-model的重大更新
- shouldComponentUpdate 的作用
- freebsd linux性能,为什么有人会选择FreeBSD而不是Linux?[关闭]
- linux终端什么字体舒服,推荐一款 Linux 上比较漂亮的字体