首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3 渐变（Gradients）之CSS3 径向渐变

Posted in HTML / CSS onJuly 08, 2016

径向渐变由它的中心定义。为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
 
语法background: radial-gradient(center, shape size, start-color, ..., last-color);
 
（1）、径向渐变 - 颜色结点均匀分布（默认情况下）

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 150px;   
  7.     width: 200px;   
  8.     background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */   
  9.     background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */   
  10.     background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */   
  11.     background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>径向渐变 - 颜色结点均匀分布</h3>  
  17. <div id="grad1"></div>  
  18. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
  19. </body>  
  20. </html>  

 

CSS3 渐变（Gradients）之CSS3 径向渐变

（2）、径向渐变 - 颜色结点不均匀分布

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 150px;   
  7.     width: 200px;   
  8.     background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */   
  9.     background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */   
  10.     background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */   
  11.     background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>径向渐变 - 颜色结点不均匀分布</h3>  
  17. <div id="grad1"></div>  
  18. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
  19. </body>  
  20. </html>  

CSS3 渐变（Gradients）之CSS3 径向渐变

（3）、设置形状
 
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 100px;   
  7.     width: 200px;   
  8.     background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */   
  9.     background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */   
  10.     background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */   
  11.     background: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */   
  12. }   
  13. #grad2 {   
  14.     height: 100px;   
  15.     width: 200px;   
  16.     background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */   
  17.     background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */   
  18.     background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */   
  19.     background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */   
  20. }   
  21. </style>  
  22. </head>  
  23. <body>  
  24.     
  25. <h3>径向渐变 - 形状</h3>  
  26. <p><strong>椭圆形 Ellipse（默认）：</strong></p>  
  27. <div id="grad1"></div>  
  28. <p><strong>圆形 Circle：</strong></p>  
  29. <div id="grad2"></div>  
  30. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
  31. </body>  
  32. </html>  

CSS3 渐变（Gradients）之CSS3 径向渐变

 （4）、不同尺寸大小关键字的使用
 
size 参数定义了渐变的大小。它可以是以下四个值：closest-side、farthest-side、closest-corner、farthest-corner
 
（5）、重复的径向渐变
 
repeating-radial-gradient() 函数用于重复径向渐变

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 150px;   
  7.     width: 200px;   
  8.     background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */   
  9.     background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */   
  10.     background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */   
  11.     background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>重复的径向渐变</h3>  
  17. <div id="grad1"></div>  
  18. <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>  
  19. </body>  
  20. </html>  

CSS3 渐变（Gradients）之CSS3 径向渐变

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木

CSS3 渐变（Gradients）之CSS3 径向渐变

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯css3实现照片墙效果
Dec 26 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
利用CSS3实现自定义滚动条代码分享
Aug 18 #HTML / CSS
纯CSS3实现图片无间断轮播效果
Aug 25 #HTML / CSS
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 #HTML / CSS
CSS3实现跳动的动画效果
Sep 12 #HTML / CSS
循环(3) 安卓(1) 二维数组(2) IDEA(2) OpenLayer(1) 查找算法(1) android studio(3) 分块(1) 嵌套(1) 移动开发(2)
You might like
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
使用JS操作页面表格，元素的一些技巧
2007/02/02 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
python实现批量注册网站用户的示例
2019/02/22 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
使用卷积神经网络（CNN）做人脸识别的示例代码
2020/03/27 Python
pytorch SENet实现案例
2020/06/24 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
耐克波兰官方网站：Nike波兰
2019/09/03 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
运动会获奖感言
2014/02/11 职场文书
维修工先进事迹
2014/05/29 职场文书
统计员岗位职责
2015/02/11 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android