CSS radial-gradient() 函数 | CSS3教程:CSS3 渐变(Gradients)

返回到:CSS3 渐变(Gradients) | CSS3教程

定义与用法

radial-gradient() 函数用径向渐变创建 “图像”。

径向渐变由中心点定义。

为了创建径向渐变你必须设置两个终止色。

CSS 语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
描述
shape确定圆的类型:ellipse (默认): 指定椭圆形的径向渐变。circle :指定圆形的径向渐变
size定义渐变的大小,可能值:farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值:center(默认):设置中间为径向渐变圆心的纵坐标值。top:设置顶部为径向渐变圆心的纵坐标值。bottom:设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color用于指定渐变的起止颜色。

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。

“webkit” 或 “moz” 或 “o” 指定的数字为支持该函数的第一个版本号前缀。

函数谷歌IE火狐苹果opera
radial-gradient()26.0
10.0 -webkit-
10.016.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

实例

颜色结点不均匀分布:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: 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>

圆形径向渐变:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: 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>

不同尺寸大小关键字的使用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Web176教程网(web176.com)</title>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black); 
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black); 
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); 
}
</style>
</head>
<body>

<h3>径向渐变 - 不同尺寸大小关键字的使用</h3>

<p><strong>closest-side:</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner(默认):</strong></p>
<div id="grad4"></div>

<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/css3bg/5184.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年1月18日 上午10:27
下一篇 2022年1月18日 上午10:33

相关推荐

发表回复

登录后才能评论