在css3中使用渐变

使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2020-12-13 07:04:59
改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ，用一个背景渐变的 DIV 代替图片。下面是实现效果示例，相比以上方案优点是不使用图片，减小请求量和流量，但是对于以上缺点，仍然无法解决。有没有完美的...
收起
详解CSS3中使用gradient实现渐变效果的方法
2021-01-21 14:11:33
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。线性渐变在Webkit下的应用 CSS Code复制内容到剪贴板 -webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法第...
收起

css3线性渐变的渐变角度_CSS3线性渐变指南

2020-06-17 19:28:35

如果您在CSS3中使用过渐变，则您可能熟悉两种方法：径向渐变和线性渐变。今天的帖子将是关于后者的。创建渐变正如规范说的，CSS3中的渐变是一幅图像，它没有像其他新功能一样具有特殊的属性，因此它是...


 梯度是一个伟大的颜色特征除了在CSS3 。 而不是仅仅增加一个单一的颜色，我们现在可以在一个声明块添加多个颜色组合，而不依赖于图像，这可能会降低我们网站上的HTTP请求 ，允许网页加载速度更快。 
 如果您在CSS3中使用过渐变，则您可能熟悉两种方法：径向渐变和线性渐变。 今天的帖子将是关于后者的。 
创建渐变
 作为规范说在CSS3渐变的图像 ，它具有像其他新功能，此外没有特殊的属性，所以它使用声明的background-image属性。 
 如果我们看一看梯度完整的语法，它看起来软垫一点，这可能导致混乱的一些人。 
div {
	background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
 因此，让我们一一深入研究语法的每个部分，以使事情变得更清楚。 
 首先，线性梯度被声明用linear-gradient()函数。 该函数具有三个主要值。 第一个值定义梯度的起始位置。 您可以使用描述性的关键字，如top开始从顶部流入的梯度; 
div {
	background-image: linear-gradient(top, #FF5A00, #FFAE00);	
}
 上面的代码片断是从官方版本W3C建立梯度。 它实际上更简单，也很容易解释，并且还会创建以下渐变。 

 您还可以使用bottom反其道而行之，否则right和left 。 
 我们也可以创建使用对角线梯度angle degree的梯度起始位置。 这是一个例子： 
div {
	background-image: linear-gradient(45deg, #FF5A00, #FFAE00);
}
 上面的代码段将创建以下颜色渐变： 

 该函数的第二个值会告诉第一颜色信息和以百分比表示，它的停止位置 。 停止位置实际上是可选的； 浏览器足够聪明来确定适当的位置，所以当我们不指定第一种颜色的停止，浏览器将0%作为默认值。 
 而且，下一个值是第二颜色组合。 它的工作原理就像以前的值，只有当它是后来加上去的颜色，我们不指定停止位置 ，值100%将被视为默认。 现在，让我们看下面的例子： 
div {
	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
 上面的代码片断将创建像我们前面看到的（无差异），但现在我们指定的颜色停止位置的梯度; 

 现在，让我们改变颜色停止 ，而这一次，我们将指定50%的第一颜色和51%为第二色彩，让我们来看看它是如何变成了; 
div {
	background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);
}

透明度
 创建transparency的渐变也是可能的。 要创建效果，我们需要转换颜色hex到rgba模式并降低alpha通道。 
div {
	background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));
}
 的片段上方将由降低颜色强度20%并且梯度会变成这样的： 

多种颜色
 如果要添加更多颜色，只需用逗号分隔符将颜色添加到另一种颜色旁边，然后让浏览器确定每种颜色的停止位置。 
div {
	background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
}
 上面的代码段将创建以下彩虹。 

浏览器兼容性
 不幸的是，在撰写本文时，当前所有的浏览器都尚未支持标准语法。 他们还需要供应商前缀（ -webkit- ， -moz- ， -ms-和-o- ）。 因此，这就是为什么完整的语法如下所示： 
div {
	background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
	background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
}
 在另一方面，在Internet Explorer中 ，特别是第9版和更低的，更谈不上标准。 在IE9和下面的梯度声明的filter ，所以如果我们想在这些浏览器添加渐变，我们不得不写这样的事情; 
div {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);
}
 该filter有其局限性：首先，它不允许超过三种颜色添加和创建透明效果也有点难度的-它不允许rgba ，但IE filter使用#ARGB ; 
div {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);
}
 这里是一个工具，帮助你转换rgba到#ARGB 。 

 演示版 
 下载源 

更快地编写语法
 正如你可以在上面看到，为了保持梯度兼容性跨浏览器 ，我们需要添加哪些代码的五个行是低效的 。 
 我们有许多方法可以简化任务。 如使用无前缀 ， Prefixr ， LESS或萨斯来帮助编译代码，但首先，我们建议使用此工具， ColorZilla梯度 。 该工具将简单地生成渐变所需的所有代码，以在所有浏览器中正常工作。 
最后的话
 我们已经创建渐变讨论颇多今天，我们已经调查了语法的各个部分，创建透明效果和保持浏览器的兼容性 。 所以，在这一点上，我们希望你已经有一个关于这个问题的更好的理解 。 
 仍然有许多事情，我们计划在未来岗位上CSS3渐变探索，敬请调到Hongkiat.com。 最后，感谢您阅读本文，我们希望您喜欢它。 
进一步阅读

 防弹跨浏览器的RGBA背景 -利·贝罗 
 CSS3图片 - W3.org 
 我什么时候可以使用CSS3渐变 - CanIUse.com 




翻译自: https://www.hongkiat.com/blog/css3-linear-gradient/

收起

展开全文

java python javascript 编程语言

使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2020-12-13 09:31:07
项目最近这几天正在做不同主题的颜色配置方案，要根据用户输入的颜色来配置整个主题的颜色，让人...我在这里简单说一下css3背景渐变中的线性渐变。线性渐变的一般结构是：复制代码代码如下: background-image: linear
收起
CSS3,线性渐变（linear-gradient）的使用总结
2020-09-24 20:09:21
今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写 CSS 代码就可以实现。
收起

css3 gradient 渐变使用

2016-09-10 18:17:15

CSS3渐变分为线性渐变和径向渐变，具体见下代码，可以复制完整代码在浏览器中打开看效果：<!DOCTYPE html> 渐变 *{ margin: 0; pa

CSS3渐变分为线性渐变和径向渐变，具体见下代码，可以复制完整代码在浏览器中打开看效果：



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>渐变</title>
        <style>
        *{
            margin: 0;
            padding: 0;
        }
            .box{
                width: 980px;
                margin: 100px auto;
            }
            .box ul{
                overflow: hidden;
                margin-right: -10px;
            }
            .box li{
                height: 100px;
                width: 100px;
                margin-right: 10px;
                margin-bottom: 10px;
                float: left;
                list-style: none;
                background: red;
            }
            /*默认渐变方向由上到下*/
            .box li:first-child{
                background: -webkit-linear-gradient(red,yellow);//safari
                background: -ms-linear-gradient(red,yellow);//ie9+
                background: -moz-linear-gradient(red,yellow);//firefox
                background: -o-linear-gradient(red,yellow);
                background: linear-gradient(red,yellow);//standard
            }
            /*
            第一个兼容写法和其他写法不同，需写出起点，其他写法给出终点 方向由左到右
            */ 
            .box li:nth-child(2){//兼容写法类似第一个
                background: -webkit-linear-gradient(left,red,yellow);//safari
                background: -moz-linear-gradient(right,red,yellow);
                background: linear-gradient(to right,red,yellow);
            }
            /*
             同上   由左上到右下
             * */
            .box li:nth-child(3){
                background: -webkit-linear-gradient(left top,red,yellow);
                background: -moz-linear-gradient(bottom right,red,yellow);
                background: -ms-linear-gradient(bottom right,red,yellow);
                background: linear-gradient(to bottom right,red,yellow);
            }

            /*
             设置第一个参数为角度值，角度值为与元素水平方向夹角  90度由左到右，角度算逆时针方向
             * */
            .box li:nth-child(4)
            {
                background: -webkit-linear-gradient(90deg,red,yellow);
                background: -moz-linear-gradient(90deg,red,yellow);
                background: -ms-linear-gradient(90deg,red,yellow);
                background: linear-gradient(90deg,red,yellow);
            }
            /*多种颜色 可依次书写*/
            .box li:nth-child(5){
                background: -webkit-linear-gradient(left,green,red,yellow,blue,pink);//safari
                background: -moz-linear-gradient(left,green,red,yellow,blue,pink);
                background: -ms-linear-gradient(left,green,red,yellow,blue,pink);
                background: linear-gradient(to right,green,red,yellow,blue,pink);
            }
            /*使用rbga颜色*/
            .box li:nth-child(6){
                background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(0,0,255,1));
                background: -moz-linear-gradient(left,rgba(255,0,0,0),rgba(0,0,255,1));
                background: -ms-linear-gradient(left,rgba(255,0,0,0),rgba(0,0,255,1));
                background: linear-gradient(to right,rgba(255,0,0,0),rgba(0,0,255,1));
            }
            /*景象渐变  方向由内向外*/
            .box li:nth-child(7)
            {
                background: -webkit-radial-gradient(red,yellow,green);
                background: -moz-radial-gradient(red,yellow,green);
                background: radial-gradient(red,yellow,green);
            }
        </style>
    </head>
    <body>
        <div class="box" id="grad">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
        </div>
    </body>
</html>

最后附一个w3school兼容性表：

收起

展开全文

gradient设置上下渐变_CSS3,线性渐变（linear-gradient）的使用总结

2020-12-20 14:27:13

《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法，今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做...

《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法，今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前，渐变效果和阴影、圆角效果一样都是做成图片，直接编写  CSS 代码就可以实现。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla(Firefox，Flock等)、WebKit(Safari、Chrome等)、Opera(Opera浏览器)、Trident(讨厌的IE浏览器)。
本文照常忽略IE不管，我们主要看看在 Mozilla、Webkit、Opera 下的应用，当然在 IE 下也可以实现，他需要通过 IE 特有的滤镜来实现，在后面会列出滤镜的使用语法，但不会具体介绍如何实用，感兴趣的可以搜索相关技术文档。
一、线性渐变在 Mozilla 下的应用
语法：
-moz-linear-gradient( [ || ,]? ,  [, ]* )
参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：
根据上面的介绍，我们先来看一个简单的例子：
HTML：
CSS：
.example {
width: 150px;
height: 80px;
}
如无特殊说明，我们后面的示例都是应用这一段 html 和 css 的基本代码。
现在我们给这个div应用一个简单的渐变样式：
.example1 {
background: -moz-linear-gradient( top,#ccc,#000);
}
效果如下：
二、线性渐变在 Webkit 下的应用
语法：
-webkit-linear-gradient( [ || ,]? ,  [, ]* )//最新发布书写语法
-webkit-gradient(,  [, ]?,  [, ]? [, ]*) //老式语法书写规则
参数：-webkit-gradient 是 webkit 引擎对渐变的实现参数，一共有五个。第一个参数表示渐变类型(type)，可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数，分别是两个color-stop函数。color-stop 函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。如图所示：
我们先来看一个老式的写法示例：
复制代码代码如下:
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));
效果如下所示：
接着我们在来看一下新式的写法：
-webkit-linear-gradient(top,#ccc,#000);
这个效果我就不在贴出来了，大家在浏览器中一看就明白了，他们是否一致的效果。仔细对比，在 Mozilla 和 Webkit 下两者的学法都基本上一致了，只是其前缀的区别，当然哪一天他们能统一成一样，对我们来说当然是更好了，那就不用去处理了。将大大节省我们的开发时间哟。
三、线性渐变在 Opera 下的应用
语法：
复制代码代码如下:
-o-linear-gradient([ || ,]? ,  [, ]); /* Opera 11.10+ */
参数：-o-linear-gradient 有三个参数。第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。(注：Opera 支持的版本有限，本例测试都是在 Opera11.1 版本下，后面不在提示)，如图所示：
示例代码：
background: -o-linear-gradient(top,#ccc, #000);
效果如图所示：
四、线性渐变在 Trident (IE) 下的应用
语法：
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr 表示终点颜色。GradientType 表示渐变类型，0 为缺省值，表示垂直渐变，1 表示水平渐变。如图所示：
上面我们主要介绍了线性渐变在上述四大核心模块下的实现方法，接着我们主要针对线性渐变在 Mozilla、Webkit、Opera 三大模块下实现各种不同线性渐变实例：
从上面的语法中我们可以很清楚的知道，要创建一个线性渐变，我们需要创建一个起点和一个渐变方向(或角度)，定义一个起始色：
-moz-linear-gradient( [ || ,]? ,  [, ]* )
-webkit-linear-gradient( [ || ,]? ,  [, ]* )
-o-linear-gradient( [ || ,]? ,  [, ]* )
具体应用如下：
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
效果如下：
起始点(Starting Point)的工作方式类似于 background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。其工作方式主要包含：Top → Bottom、Left → Right、bottom → top、right → left等，接着我们主要一种一种来看其实现的效果：
1、开始于center(水平方向)和top(垂直方向)也就是Top → Bottom：
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ace, #f96);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ace, #f96);
效果：
2、始于left(水平方向)和center(垂直方向)也是就Left → Right：
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96);
效果如下：
3、起始于left(水平方向)和top(垂直方向):
background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);
效果如下：
4、Linear Gradient (with Even Stops):
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
效果如下：
5、with Specified Arbitrary Stops：
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), color-stop(0.95, #f96), to(#ace));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
效果如下：
6、角度(Angle)：
正如上面看到的示例，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。例如，下面的两个渐变具有相同的起点left center，但是加上一个30度的角度。
没有角度的示例代码：
background: -moz-linear-gradient(left, #ace, #f96);
background: -webkit-linear-gradient(left,#ace,#f96);
background: -o-linear-gradient(left, #ace, #f96);
加上30度的角度代码：
background: -moz-linear-gradient(left 30deg, #ace, #f96);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
background: -o-linear-gradient(30deg, #ace, #f96);
效果图如下：
当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。我来看看你核心代码：
background: -moz-linear-gradient(, #ace, #f96);
background: -webkit-gradient(,, from(#ace), to(#f96));
background: -webkit-linear-gradient(, #ace, #f96);
background: -o-linear-gradient(, #ace, #f96);
我们来看看各角度的区别：
.deg0 {
background: -moz-linear-gradient(0deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(0deg, #ace, #f96);
background: -o-linear-gradient(0deg, #ace, #f96);
}
.deg45 {
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
background: -moz-linear-gradient(90deg, #ace, #f96);
background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(90deg, #ace, #f96);
background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
background: -moz-linear-gradient(135deg, #ace, #f96);
background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
background: -webkit-linear-gradient(135deg, #ace, #f96);
background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
background: -moz-linear-gradient(180deg, #ace, #f96);
background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(180deg, #ace, #f96);
background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg225 {
background: -moz-linear-gradient(225deg, #ace, #f96);
background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
background: -webkit-linear-gradient(225deg, #ace, #f96);
background: -o-linear-gradient(225deg, #ace, #f96);
}
.deg270 {
background: -moz-linear-gradient(270deg, #ace, #f96);
background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
background: -webkit-linear-gradient(270deg, #ace, #f96);
background: -o-linear-gradient(270deg, #ace, #f96);
}
.deg315 {
background: -moz-linear-gradient(315deg, #ace, #f96);
background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
background: -webkit-linear-gradient(315deg, #ace, #f96);
background: -o-linear-gradient(315deg, #ace, #f96);
}
.deg360 {
background: -moz-linear-gradient(360deg, #ace, #f96);
background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
background: -webkit-linear-gradient(360deg, #ace, #f96);
background: -o-linear-gradient(360deg, #ace, #f96);
}
效果如下：
除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置(以百分比或长度设定)含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。 这也是通过CSS3 Gradient制作渐变的一个关键所在，其直接影响了你的设计效果，像我们这里的示例都不是完美的效果，只是为了能给大家展示一个渐变的效果，大家就这样先用着吧。我们接着看一下不同的起址色的示例：
background: -moz-linear-gradient(top, #ace, #f96 80%, #f96);
background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);
background: -o-linear-gradient(top, #ace, #f96 80%, #f96);
效果如下：
如果没有指定位置，颜色会均匀分布。如下面的示例：
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
效果如下
7、渐变上应用透明度(Transparency)：
透明渐变对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。我们来看一个官网的示例吧：
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
接着看看效果吧
是不是很神奇呀。如果想体会的话，快点动手跟我一起做吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

收起

展开全文

css 背景重复渐变_CSS3重复渐变[CSS3提示]

2020-06-13 07:38:35

在CSS3之前，我们确实需要图像来创建渐变效果。现在我们仅使用CSS就可以提供相同（更好）的效果在之前的文章中，我们讨论了CSS3可以实现的两种类型的渐变：径向和线性渐变。这次，我们将研究它们的...


 有许多CSS3功能会改变我们装饰网站的方式，其中之一就是CSS3渐变。 在CSS3之前，我们肯定需要图像来创建渐变效果。 现在我们仅使用CSS就可以提供相同（更好）的效果 
 在之前的文章中，我们讨论了CSS3可以实现的两种类型的渐变： 

 径向和 
 线性渐变 。 

 这次，我们将研究它们的同级： 重复渐变 。 
基本重复
 重复渐变本质上是一种扩展。 语法类似于我们定义“径向”和“线性”渐变的方式，只是顾名思义，它还会在指定的方向上重复颜色。 要重复线性渐变，可以使用此功能： repeating-linear-gradient ，而要重复径向或椭圆形渐变，则可以使用此功能： repeating-radial-gradient 。 
/*Linear*/
.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);	
}

/*Radial*/
.gradient {
	background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);	
}
 除颜色重复外，其余代码没有太大区别。 以下是描述此颜色重复工作方式的简单图示。 

 尽管上面的图像仅说明了重复线性渐变，但是基本原理也适用于径向渐变，其中颜色将在任何方向上无限重复。 请点击以下链接查看演示。 
 观看演示 
 在下一部分中，我们将向您展示如何在实际示例中利用CSS3重复渐变。 
示例：创建模式
 重复渐变最常见的实现是创建背景图案。 在此示例中，我们将创建简单的垂直条纹图案。 
.gradient {
	background: repeating-linear-gradient(0deg, #f9f9f9, #f9f9f9 20px, #cccccc 20px, #cccccc 40px);
}
 请注意，我们如何在同一点20px定义#f9f9f9和#cccccc两种不同的颜色。 本示例将锐化这两种颜色之间的差异并消除模糊性。 

 要定向方向，我们只需更改角度– 90deg将水平定向，而45deg将对角定向，依此类推。 
 观看演示 
示例：创建图纸
 在第二个示例中，我们将创建您可能经常在笔记本中看到的打印纸。 要创建这种效果，我们只需要一个div ，没有图像，只有CSS。 
.gradient {
	width: auto;
	height: 500px;
	margin: 0 50px;
	background: -webkit-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -moz-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: -o-repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background: repeating-linear-gradient( -90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
	background-size: 100% 21px;
}
 注意，我们还添加了CSS3 background-size属性，以指定100％20px的背景图像的大小。 尽管CSS3渐变显示“颜色”，但实际上它被分类为图像， 而不是颜色 。 

 接下来，我们将使用：before pseudo-element在纸张左侧添加一个条纹。 

.gradient:before {
	content: "";
	display: inline-block;
	height: 500px;
	width: 4px;
	border-left: 4px double #FCA1A1;
	position: relative;
	left: 30px;
}
 我们完成了，这真的很简单吧？ 现在，我们可以从下面的链接中看到它们的运行情况。 

 观看演示 
 下载源 

更多资源

 Webkit CSS3渐变 
 Microsoft开发人员网络上CSS3渐变 




翻译自: https://www.hongkiat.com/blog/css3-repeating-gradients/

收起

展开全文

python java 人工智能 javascript

qpieslice 渐变效果_在IE9中使用CSS3 PIE的线性渐变不起作用,IE8可以
2021-02-11 07:08:09
我使用CSS3 PIE来实现这一点,并且border-radius在两个(IE8 / 9)中工作,盒子阴影在两者中工作,但是我也依赖于线性渐变.我有大量标签用于实现此目的：background: #E6E6E6; /* fallback */background: -webkit-gra...
收起
CSS3中渐变gradient详解
2015-07-16 20:50:00
CSS3中的Gradient有两种，分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~。☺) 首先说一下webkit的浏览器(谷歌的Chrome啊等...
收起
gradient设置上下渐变_CSS3中渐变gradient详解
2020-12-20 14:27:14
CSS3中的Gradient有两种，分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~。☺)首先说一下webkit的浏览器(谷歌的Chrome啊等等)...
收起
css3实现背景渐变
2016-05-31 22:17:14
css3实现了背景渐变。 ...一：线性渐变详细：http://dev.w3.org/csswg/css3-images/#gradients ... 在CSS3中，可以使用 linear-gradient实现背景线性渐变。 = linear-gradient( [ [ | to ] ,]? [, ]+
收起
CSS3系列-css3之线性渐变初探
2018-01-18 09:39:20
转载自：juejin.im/post/5a5f72…...入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的这个属性。结合*《CSS揭秘》*、张鑫旭大神的深入理解C...
收起
设置边框_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法
2021-01-15 00:19:30
程序猿的生活：web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）zhuanlan.zhihu.com我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如...
收起
CSS3渐变——径向渐变
2015-04-15 18:00:00
上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法（称得上是W3C的标准语法）相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本...
收起
css3背景颜色渐变属性
2019-07-22 11:56:00
很久之前写的一篇文章了，今天重新整理一下关于css3背景渐变的写法，至于是怎么来的，可以看下面...如果在移动端还可以适当使用CSS3这个属性 css3：linear-gradient 比如：黑色渐变到白色，代码如下： .gr...
收起
如何在dw给段落设置背景颜色_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法...
2020-11-29 01:23:44
程序猿的生活：web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）zhuanlan.zhihu.com我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如...
收起
css边框椭圆渐变_CSS3圆形和椭圆形渐变[CSS3技巧]
2020-06-14 03:48:35
CSS3中的渐变是使用background-image属性声明的。当我们还需要在单个规则集中添加background-color ，以使它们不会相互冲突时，这是为了实现更好的兼容性。然后，要创建径向渐变，我们只需使用radial-gra...
收起
python java javascript js
CSS3颜色渐变
2018-10-06 12:58:53
CSS3 渐变，渐变是两种或多种颜色之间的平滑过渡。...1. CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photosho...
收起
CSS：使用css3制作渐变色纺锤线
2019-12-02 19:14:17
<div class="mask">...在css文件中: .mask { overflow: hidden; margin-top: 20px; height: 20px; } .mask:after { content: ''; display: block; margin: -25px auto 0; wid...
收起
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2021-01-19 21:03:48
在本文中，我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。 PS：本文原文本来提供了一个视频，但是由于众所周知的原因，我们无法观看这个在Youtube上的视频，想看的同学请自己想办法...
收起
【前端Talkking】CSS3系列-css3之线性渐变初探
2018-01-18 02:38:32
入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的这个属性。结合*《CSS揭秘》*、张鑫旭大神的深入理解CSS3 gradient斜向线性渐变和CSS3 ra....
收起
css3背景色由浅黑变深黑_css3背景颜色渐变属性
2020-12-23 08:05:35
很久之前写的一篇文章了，今天重新整理...如果在移动端还可以适当使用CSS3这个属性css3：linear-gradient比如：黑色渐变到白色，代码如下：.gradient{background: -moz-linear-gradient(top, #000000 0%, #ffffff...
收起
css3中背景颜色渐变（转）
2016-10-07 23:47:00
原文链接：http://caibaojian.com/css3-background-gradient.html 整理一下关于css3背景渐变的写法，...如果在移动端还可以适当使用CSS3这个属性原文来自：http://caibaojian.com/css3-background-gradient.html...
收起
CSS3的渐变属性
2018-10-08 07:55:28
CSS3线性渐变在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或沿任意轴。如果使用过制作 Photoshop等软件，对线性渐变并不会陌生。CSS3制作渐变效果，其实和使用...
收起

使用CSS3的背景渐变Text Gradient 创建文字颜色渐变

详解CSS3中使用gradient实现渐变效果的方法

css3线性渐变的渐变角度_CSS3线性渐变指南

创建渐变

透明度

多种颜色

浏览器兼容性

更快地编写语法

最后的话

进一步阅读

使用css3背景渐变中的透明度来设置不同颜色的背景渐变

CSS3,线性渐变（linear-gradient）的使用总结

css3 gradient 渐变使用

gradient设置上下渐变_CSS3,线性渐变（linear-gradient）的使用总结

css 背景重复渐变_CSS3重复渐变[CSS3提示]

基本重复

示例：创建模式

示例：创建图纸

更多资源

qpieslice 渐变效果_在IE9中使用CSS3 PIE的线性渐变不起作用,IE8可以

CSS3中渐变gradient详解

gradient设置上下渐变_CSS3中渐变gradient详解

css3实现背景渐变

CSS3系列-css3之线性渐变初探

设置边框_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法

CSS3渐变——径向渐变

css3背景颜色渐变属性

如何在dw给段落设置背景颜色_css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法...

css边框椭圆渐变_CSS3圆形和椭圆形渐变[CSS3技巧]

CSS3颜色渐变

CSS：使用css3制作渐变色纺锤线

CSS3线性渐变简单实现以及该属性在浏览器中的不同

【前端Talkking】CSS3系列-css3之线性渐变初探

css3背景色由浅黑变深黑_css3背景颜色渐变属性

css3中背景颜色渐变（转）

CSS3的渐变属性

在css3中使用渐变