元素背景径向渐变填充
3767字,阅读需时13分钟
来自专栏
课程/专栏

渐变填充分为线性渐变和径向渐变两种方式。前面介绍了线性渐变填充,这节介绍径向渐变填充。径向渐变填充是从起点颜色到终点颜色,从内到外进行椭圆或圆形渐变。

径向渐变填充使用radial-gradient()函数,需要定义起始颜色、中间过度颜色和终止颜色,中间过度颜色可以有多种颜色,也可以省略过度颜色。例如下面的radial-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的径向渐变填充样式。

background: radial-gradient (red, yellow,blue);

radial-gradient()函数实现的渐变填充样式,作为background样式标签的一个属性值应用到HTML元素。下面的HTML文档展示了radial-gradient()函数的使用方法。

<html>
<head>
<title>径向渐变填充</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">     
      .grad1 {
    height:200px;
                width:300px;    
                background:radial-gradient(red, yellow,blue);
       }
</style>
</head>
<body>
<h3>径向椭圆形渐变 - 从元素中间位置开始由内到外</h3>
<p>从元素中间位置开始的径向椭圆形渐变,由内到外,从红色开始,转为黄色,再到蓝色</p>
<div></div>
</body>
</html>

在上面的网页代码中。使用radial-gradient()函数定义了径向渐变填充样式,起始颜色为红色,中间过度颜色为黄色,终止颜色为蓝色,渐变方向是从元素中心位置开始由内到外。下图是浏览器显示效果。

  image.png                                          

 

从上面的案例效果可以看出,radial-gradient()函数默认是由内到外进行椭圆渐变,可以在radial-gradient()函数中指定圆的类型,来改变默认的渐变样式。圆形渐变使用关键字circle,椭圆渐变使用关键字ellipse(默认)。下面的radial-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的圆形渐变填充样式。

background:radial-gradient(circle,red, yellow,blue);

下面的HTML文档展示了radial-gradient()函数指定填充方向的使用方法。

<html>
<head>
<title>径向渐变填充</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">     
      .grad1 {
    height:200px;
                width:300px;    
                background:radial-gradient(circle,red, yellow,blue);
       }
</style>
</head>
<body>
<h3>径向圆形渐变 - 从元素中间位置开始由内到外</h3>
<p>从元素中间位置开始的径向圆形渐变,由内到外,从红色开始,转为黄色,再到蓝色</p>
<div></div>
</body>
</html>

浏览器显示效果如下图所示。从浏览器显示效果可以看出,径向渐变样式为圆形渐变。

image.png

radial-gradient()函数提供了farthest-corner(默认)、closest-side、closest-corner、farthest-side四个关键字,用于改变径向渐变的半径长度。farthest-corner指定径向渐变的半径长度为从圆心到离圆心最远的角;closest-side指定径向渐变的半径长度为从圆心到离圆心最近的边;closest-corner指定径向渐变的半径长度为从圆心到离圆心最近的角;farthest-side指定径向渐变的半径长度为从圆心到离圆心最远的边。下面的HTML文档展示了改变径向渐变的半径长度的使用方法。

<html>
<head>
<title>径向渐变填充</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">     
      .grad1 {
    height:200px;
                width:300px;    
                background:radial-gradient(circle closest-side,red, yellow,blue);
       }
</style>
</head>
<body>
<h3>径向圆形渐变 - 从元素中间位置开始由内到外</h3>
<p>从元素中间位置开始的径向圆形渐变,由内到外,从红色开始,转为黄色,再到蓝色</p>
<div></div>
</body>
</html>

在上面的网页代码中,radial-gradient()函数使用了closest-side关键字,圆形渐变半径长度为从圆心到离圆心最近边的距离。浏览器显示效果如下图所示。

image.png 

radial-gradient()函数径向渐变默认的起始位置是元素的中间位置。可以在radial-gradient()函数中指定一个位置或数值,来改变默认的径向渐变起始位置。指定位置时使用center(默认)、top、bottom关键字。center设置元素的中间为径向渐变圆心的坐标值;top设置元素的顶部为径向渐变圆心的纵坐标值,横坐标值默认为center;bottom设置元素的底部为径向渐变圆心的纵坐标值,横坐标值默认为center。下面的radial-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的圆形渐变 、渐变起始位置为顶部的填充样式。

background:radial-gradient(circle at top,red, yellow,blue);

浏览器显示效果如下图所示。

image.png

下面的radial-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的圆形渐变 、渐变起始位置为元素坐标(20,60),元素坐标位置从元素的左上角开始计算。

填充样式。

background:radial-gradient(circle at 20px 60px,red, yellow,blue);

浏览器显示效果如下图所示。

image.png

 

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有