编程 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复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

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

（3）、设置形状

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}
#grad2 {
height: 100px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变 - 形状</h3>
<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>
<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

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

（4）、不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：closest-side、farthest-side、closest-corner、farthest-corner

（5）、重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>重复的径向渐变</h3>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>

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

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

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

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

HTML / CSS 相关文章推荐

CSS3中Color的一些特性介绍

May 27 HTML / CSS

利用CSS3把图片变成灰色模式的实例代码

Sep 06 HTML / CSS

详解CSS3中强大的filter(滤镜)属性

Jun 29 HTML / CSS

CSS3动画特效在活动页中的应用

Jan 21 HTML / CSS

canvas烟花特效锦集

Jan 17 HTML / CSS

分享一个H5原生form表单的checkbox特效代码

Feb 26 HTML / CSS

HTML5 语音搜索只需一句代码

Jan 03 HTML / CSS

使用HTML5的File实现base64和图片的互转

Aug 01 HTML / CSS

html5使用canvas画三角形

Dec 15 HTML / CSS

使用分层画布来优化HTML5渲染的教程

May 08 HTML / CSS

html5+css如何实现中间大两头小的轮播效果

Dec 06 HTML / CSS

CSS3实现的3D隧道效果

Apr 27 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

You might like

不错的PHP学习之php4与php5之间会穿梭一点点感悟

2007/05/03 PHP

PHP安全下载文件的方法

2016/04/07 PHP

Zend Framework常用校验器详解

2016/12/09 PHP

Thinkphp极验滑动验证码实现步骤解析

2020/11/24 PHP

基于jquery的实现简单的表格中增加或删除下一行

2010/08/01 Javascript

jquery实现网站超链接和图片提示效果

2013/03/21 Javascript

jQuery实现的超链接提示效果示例【附demo源码下载】

2016/09/09 Javascript

JS实现的几个常用算法

2016/11/12 Javascript

浅谈js中几种实用的跨域方法原理详解

2016/12/02 Javascript

基于node.js依赖express解析post请求四种数据格式

2017/02/13 Javascript

Element ui 下拉多选时新增一个选择所有的选项

2019/08/21 Javascript

记录vue做微信自定义分享的一些问题

2019/09/12 Javascript

浅谈javascript如何获取文件后缀名

2020/08/07 Javascript

python爬虫实战之爬取京东商城实例教程

2017/04/24 Python

利用python编写一个图片主色转换的脚本

2017/12/07 Python

Python实现简易版的Web服务器(推荐)

2018/01/29 Python

Tensorflow的可视化工具Tensorboard的初步使用详解

2018/02/11 Python

python解决pandas处理缺失值为空字符串的问题

2018/04/08 Python

python的格式化输出（format,%）实例详解

2018/06/01 Python

python中的插值 scipy-interp的实现代码

2018/07/23 Python

利用pandas进行大文件计数处理的方法

2018/07/25 Python

使用Django简单编写一个XSS平台的方法步骤

2019/03/25 Python

Keras SGD 随机梯度下降优化器参数设置方式

2020/06/19 Python

详解如何用HTML5 Canvas API控制图片的缩放变换

2016/03/22 HTML / CSS

详解基于canvas的视频遮罩插件

2018/01/04 HTML / CSS

美国儿童珠宝在线零售商：Loveivy

2019/05/22 全球购物

材料物理专业求职信

2014/09/01 职场文书

优秀员工事迹材料

2014/12/20 职场文书

老公保证书

2015/01/17 职场文书

酒店员工辞职信范文

2015/02/28 职场文书

大学生预备党员自我评价

2015/03/04 职场文书

拾金不昧通报表扬范文

2015/05/05 职场文书

湘江北去观后感

2015/06/15 职场文书

中考百日冲刺决心书

2015/09/22 职场文书

Python基础详解之描述符

2021/04/28 Python

JavaScript 与 TypeScript之间的联系

2021/11/27 Javascript