关于CSS3颜色渐变(liner-gradient)的心得(%的用法)

最新推荐文章于 2024-05-09 20:59:01 发布

Tabris_k

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/Tabris_k/article/details/45365399

版权

在w3cschool学习了css3的渐变属性。其中的liner-gradient(xx, color1 xx%, color2 xx%)令我感到困惑。不过在自己一番研究后总算有了点收货。

w3cschool上使用的是

repeating-linear-gradient(...) 方法1

还有一种更基本的设定渐变属性的方法是

linear-gradient(...) 方法2

楼主就是被这两种方法搞晕了。

方法1的特点是：未定义的%区域将会被重复填充。举例

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(to right,red 0%, yellow 10%, green 20%); 
}
</style>
</head>
<body>

<h3>重复的线性渐变</h3>

<div id="grad1"></div>

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

</body>
</html>

我们要先建立个简单的概念。在脑中模拟一个下载进度条。他是这样的：|0% - - - 20% - - - 40% - - - 60% - - - 80% - - - 100%|

在grad1的background中，渐变色自左向右渐变。在0%位置是正红色，10%的位置是正黄色，20%的位置是正绿色。此时前20%的颜色布局是这样的。

| red - - - yellow - - - green |

三个颜色之间隔了两个10%。每两个颜色之间区域的颜色都是均匀渐变的。

前20%的颜色填充完毕，那么后80%呢？ repeating-linear-gradient将会吧前20%的作为蓝本，均匀复制填充剩下的区域。就好像：

方法2的特点是：未定义的%区域将会被最后一个颜色全部填充。举例：

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(to right,red 0%, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>重复的线性渐变</h3>

<div id="grad1"></div>

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

</body>
</html>

正如我所说的，他的渐变可以看成这样：

| red - - - yellow - - - green |(here is 20%)| green - - - - - - - - - - - - green |(here is 100%)

正绿色填充了剩下所有区域。

Tabris_k

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于CSS3颜色渐变(liner-gradient)的心得(%的用法)

在w3cschool学习了css3的渐变属性。其中的liner-gradient(xx, color1 xx%, color2 xx%)令我感到困惑。不过在自己一番研究后总算有了点收货。w3cschool上使用的是repeating-linear-gradient(...)方法1还有一种更基本的设定渐变属性的方法是linear-gradient(...)方法2楼
复制链接

扫一扫