html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探
1 径向渐变radial-gradient
这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里
1.1 基本语法
线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐变。其标准语法如下:
radial-gradient(position, shape, size, color-stop);
1.2 参数详细说明
position,指明径向渐变的椭圆或者圆心的位置,支持的值有:left、right、top、bottom,也可以指定px或者百分比,默认是图形的正中心。相应的对应关系如下:
top left
at 0% 0%
top center
at 0% 50%
top right
at 0% 100%
right center
at 100% 50%
right bottom
at 100% 100%
bottom center
at 100% 50%
left bottom
at 100% 0%
left center
at 0% 100%
center center
at 50% 50%
shape,指明径向渐变的形状,可以为circle或者ellipse,从字面意思可知,circle表示圆形,ellipse表示椭圆形。默认为ellipse。
如果设置为circle,则size不能设置为百分比,只能设置px,表示圆形的半径,例如20px circle表示圆形的半径为20px,可以用下图来描述圆形的渐变形状:
如果设置为ellipse,则size表示椭圆的水平半径和垂直半径,比如:20% 30%表示水平半径20%(相对于元素的宽),30%表示垂直半径为30%(相对于元素的高)的径向渐变,可以用下图来描述椭圆形的渐变形状:
size,表示渐变的尺寸,即渐变到哪里停止,除了支持百分比以及像素,还支持以下四个关键字,详细如下:
关键字
描述
closest-side
渐变中心距离容器最近的边作为终止位置。
closest-corner
渐变中心距离容器最近的角作为终止位置。
farthest-side
渐变中心距离容器最远的边作为终止位置。
farthest-corner(默认)
渐变中心距离容器最远的角作为终止位置。
size和position可以用at连接,例如30px 40px at center,表示以元素中心点为圆心,30px为水平半径,40px为垂直半径的椭圆型渐变。
color-stop,与线性渐变的用法相同,这里就不在赘述了。
1.3 径向渐变之案例
1.3.1 最基础的用法
.easy{
width: 200px;
height: 100px;
background: radial-gradient(yellow, red);
}
以中心(50%, 50%)为起点,到最远角(farthest-corner),从red到green、blue的均匀渐变,效果如下图:
1.3.2 多颜色节点不均匀分布
.easy2{
width: 200px;
height: 100px;
background: radial-gradient(yellow 5%, red 15%, blue 60%);
}
1.3.3 指定渐变的形状
.easy3{
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid deeppink;
background: radial-gradient(circle, yellow 5%, red 15%, white 40%);
}
.easy4{
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid deeppink;
background: radial-gradient(ellipse, yellow 5%, red 25%, white 40%);
}
1.3.4 指定径向渐变的位置和尺寸
使用数值指定渐变的位置和尺寸,在本例中,30px 50px指明了水平方向的渐变尺寸为30px,垂直方向上的渐变尺寸为50px,同时渐变的中心点为center或者left。
.box{
display: inline-block;
width: 200px;
height: 100px;
}
.box1{
background: radial-gradient(30px 50px at center, yellow, red);
}
.box2{
background: radial-gradient(50px 50px at center, yellow, red);
}
.box3{
background: radial-gradient(50px 30px at center, yellow, red);
}
.box4{
background: radial-gradient(20% 50% at left, yellow, red);
}
使用关键字指定渐变的位置和尺寸。在本例中,使用关键字指明了径向渐变的尺寸,相关的解释可以对着上文的具体含义。
.box{
display: inline-block;
width: 200px;
height: 100px;
}
.box10{
background: radial-gradient(closest-side circle at 50% 75%, yellow, red);
}
.box11{
background: radial-gradient(closest-corner circle at 50% 75%, yellow, red);
}
.box12{
background: radial-gradient(farthest-side circle at 50% 75%, yellow, red);
}
.box13{
background: radial-gradient(farthest-corner circle at 50% 75%, yellow, red);
}
1.3.5 可累加的径向渐变背景图
径向渐变的本质也是背景图,利用背景的可叠加性,可以实现酷炫的效果,比如本例中的类似眼睛的效果图。
.easy5{
display: inline-block;
width: 200px;
height: 100px;
background: radial-gradient(100px 50px ellipse, transparent 40px, red 60px, transparent 61px),
radial-gradient(10px circle, #000, #000 10px, transparent 11px);
}
1.3.6 径向渐变的尺寸控制
利用background-size属性控制背景图的大小以及其本身的重复性质,我们还可以实现其的一些效果。
利用径向渐变实现复杂的纹理效果
.easy6{
display: inline-block;
width: 100px;
height: 200px;
background: radial-gradient(5px 10px ellipse, transparent 4px, yellow 5px, red 6px, transparent 7px),
radial-gradient(3px circle, red, red 3px, transparent 4px);
background-size: 25px;
}
利用径向渐变实现水波效果
.easy7{
width: 200px;
height: 100px;
background: #cd0000;
position: relative;
}
.easy7:after{
content: '';
position: absolute;
height: 10px;
left: 0;
right: 0;
bottom: -10px;
background: radial-gradient(20px 15px ellipse at top, #cd0000 10px, transparent 11px);
background-size: 20px 15px;
}
2 更多关于径向渐变的东西
除了径向渐变radial-gradient,css3中还支持重复径向渐变reapting-radial-gradient。
利用重复径向渐变实现地震波效果
利用重复径向渐变实现唱片CD效果
3 写在最后
如果想对提高自己的csss水平,推荐《CSS揭秘》,很不错额。
喜欢的话,麻烦点个赞。感谢阅读。
4 参考链接
遇见了,不妨关注下我的微信公众号「前端Talkking」
html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探相关推荐
- 【前端Talkking】CSS系列-css3之box-shadow介绍
1.写在前面 在CSS3中,可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果,这个属性在前端开发中使用的非常多,例如segmentfault的首页就是使用了box-shadow属 ...
- 【前端|CSS系列第3篇】CSS盒模型、浮动及定位
在前端开发中,CSS是一项重要的技术,用于控制网页的样式和布局.在本系列的第三篇文章中,我们将学习CSS的盒模型.浮动以及定位,这些概念和技术在页面布局中起着至关重要的作用.通过本文的学习,希望能够帮 ...
- Web 前端—HTML+CSS系列
HTML.CSS 一.HTML+CSS 1.1什么是HTML.CSS 1.2宇宙第一编辑器VS Code 1.3Chrome浏览器 1.4.深入了解网站开发 一.HTML基本操作 1.web前端三大核 ...
- CSS如何设置自定义渐变色? 线性渐变篇
CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡. CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下 ...
- html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 前端HTML CSS JavaScipt JQuery
Web前端基础 应用程序分类 客户端/服务器 Client/Server CS模式 用户需要下载客户端才能使用.如微信.QQ.游戏等. 特点:功能丰富,安装繁琐.需要更新.平台不同,软件不同,开发成本 ...
- HTML+CSS系列教程
HTML+CSS系列教程这里写目录标题 一.HTML+CSS系列导学 1.1拨云见日 1.2溯本求源 1.3风生水起 1.4巧夺天工 二.什么是HTML和CSS 2.1如何看到网站的原始代码呢? 2. ...
- 前端开发--CSS基础
快速生成css样式 采用简写的方式即可 w200 tab键 width:200px:lh200 tab键line-height:200px:## web服务器免费的远程服务,免费空间 http://f ...
最新文章
- 整理了 70 个 Python 面向对象编程案例,怎能不收藏?
- 第14件事 分析竞争对手的方法
- arm linux gif 显示_100ASK_IMX6ULL arm板子如何显示图片、汉字、划线、背景色
- 超大容量文本的单词统计(洛谷P1308题题解,Java语言描述)
- ERROR: No matching distribution found for mysqlclient==2.0.3
- 演练 多班分数录入统计优秀人数
- 百度视觉技术部实习生招聘
- 兼容性极好的圆角边框
- [转] 基于 Apache Mahout 构建社会化推荐引擎
- servlet后端连接 微信小程序与_微信小程序授权登录
- web服务器通信原理
- Win10系统下使用Setuna截图自动放大解决办法
- 工程物资云平台_SaaS产品设计说明书(PRD)_施工企业工程项目物资材料管理软件系统
- 麒麟下适配mellanox网卡驱动
- 服装尺寸 html,史上最完整的服装尺寸号型和换算知识
- python 点云重建_点云 表面重建
- mean学习(1)----bootstrap
- Python格式化字符串新语法:f-strings
- 首出集团:超级推荐引爆流量,6步店铺跨越到第六层级
- 基于verilog的数字频率计数器
热门文章
- 为什么绝对收敛级数具有可交换性+为什么一般项级数不能使用比较判别法/等价判别法?
- 小技巧 - 如何将“比例比例”站上的视频下载到本地?
- 通用计算机含义,当今的计算机其通用的名称应该是通用数字计算机,请简单描述包含的三层含义? (8.0分)...
- java课程设计 华容道_Java课设-数字华容道
- 开发者的拯救者还是掘墓人?解密低代码开发平台 ZT
- 澳拳击袋鼠体型巨大 身高超2米体重近200斤
- python爬取微博话题下面的帖子并存入excel文件
- MySql版本号查看命令
- 计算机,软件工程类毕业论文选题要求
- 关于将txt文件中的数据批量添加到excel中,显示不全的问题