linear-gradient()的用法实例

这篇文章给大家分享的是有关linear-gradient()的用法实例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站是专业的和布克赛尔蒙古网站建设公司，和布克赛尔蒙古接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行和布克赛尔蒙古网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

linear-gradient() 的语法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

linear-gradient() 的取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop>：用于指定渐变的起止颜色：
<color>：指定颜色。
<length>：用长度值指定起止色位置。不允许负值
<percentage>：用百分比指定起止色位置。

注意：为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

linear-gradient()的浏览器兼容性

linear-gradient()的用法实例

HTML部分：

<div id="box"></div>

CSS部分：

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

效果图：

如图所示，实例是从红色到黄色，从左至右的线性渐变，写的时候要注意浏览器的兼容性问题和语法规则。本文主要介绍了CSS中的线性渐变，渐变分为线性渐变和径向渐变，下一篇文章会

感谢各位的阅读！关于“linear-gradient()的用法实例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网页标题：linear-gradient()的用法实例
网站路径：https://www.cdcxhl.com/article22/ppjhcc.html

成都网站建设公司_创新互联，为您提供标签优化、网站制作、域名注册、虚拟主机、网站策划、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联