元素背景线性渐变填充
4835字,阅读需时17分钟
来自专栏
课程/专栏

在CSS3之前实现元素背景的渐变填充需要用图像来实现,用图像实现元素的渐变填充存在显示模糊、占用流量和网页下载时间过长的问题。CSS3增加了对元素背景渐变填充的支持,当前主流浏览器的版本一般都支持CSS3。渐变填充分为线性渐变和径向渐变,线性渐变使用CSS3函数linear-gradient()。

使用linear-gradient()函数实现元素背景的渐变填充,需要定义起始颜色、中间过度颜色和终止颜色,中间过度颜色可以有多种颜色。例如下面的linear-gradient()函数定义了起始颜色为红色、过度颜色为黄色、终止颜色为蓝色的渐变填充样式。

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

linear-gradient()函数实现的渐变填充样式,作为background样式标签的一个属性值应用到HTML元素。下面的HTML文档展示了linear-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:linear-gradient(red, yellow,blue);
       }
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变,从红色开始,转为黄色,再到蓝色</p>
<div></div>
</body>
</html>

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

image.png

                                            

 

linear-gradient()函数默认的填充方向是从上到下,可以在linear-gradient()函数中指定一个方向或角度,来改变默认的填充方向。指定方向时使用to关键字,例如to right(从左到右)、to bottom right(从左上角到右下角)。下面的linear-gradient()函数定义了填充方向为从左到右,起始颜色为红色、过度颜色为黄色和灰色、终止颜色为蓝色的渐变填充样式。

  background:linear-gradient(to right,red, yellow,gray,blue);

下面的HTML文档展示了linear-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:linear-gradient(to right,red, yellow,gray,blue);
       }
      .grad2 {
    height:200px;
                width:300px;    
                background:linear-gradient(to bottom right,red, yellow,gray,blue);
       }
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左侧开始的线性渐变,从红色开始,转为黄色,再转为灰色,最后再到蓝色</p>
<div></div>
<h3>线性渐变 - 从左上角到右下角</h3>
<p>从左上角开始的线性渐变,从红色开始,转为黄色,再转为灰色,最后再到蓝色</p>
<div></div>
</body>
</html>

在上面的网页代码中,grad1样式的渐变填充方向是从左到右,grad2样式的渐变填充方向是从左上角到右下角。浏览器显示效果如下图所示。

image.png

也可以在linear-gradient()函数中指定一个角度来设置渐变填充方向。0度表示渐变方向从下向上,90度表示渐变方向从左向右,角度按顺时针方向旋转。下面的HTML文档展示了linear-gradient()函数使用角度指定方向的使用方法。

<html>
<head>
<title>渐变填充</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">     
      .grad1 {
    height:100px;
                width:100px;    
                background:linear-gradient(0deg,red, yellow,gray,blue);
       }
      .grad2 {
    height:100px;
                width:100px;    
                background:linear-gradient(30deg,red, yellow,gray,blue);
       }
     .grad3 {
    height:100px;
                width:100px;    
                background:linear-gradient(60deg,red, yellow,gray,blue);
       }
     .grad4 {
    height:100px;
                width:100px;    
                background:linear-gradient(90deg,red, yellow,gray,blue);
       }
    .grad5 {
    height:100px;
                width:100px;    
                background:linear-gradient(120deg,red, yellow,gray,blue);
       }
      li {
         width:120px;
         float:left;
         heigth:200px;
     }
</style>
</head>
<body>
<ul>
<li>
<h3>0度方向</h3>
<div></div>
</li>
<li>
<h3>30度方向</h3>
<div></div>
</li>
<li>
<h3>60度方向</h3>
<div></div>
</li>
<li>
<h3>90度方向</h3>
<div></div>
</li>
<li>
<h3>120度方向</h3>
<div></div>
</li>
</ul>
</body>
</html>

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

image.png

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

手机、电脑同步学

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

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