精华内容
下载资源
问答
  • 2019-01-05 13:47:00
    background: linear-gradient(direction, color-stop1, color-stop2, ...);

    从上到下:

    #grad {
      background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(red, blue); /* 标准的语法 */
    }

    从左到右:

    #grad {
      background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, red , blue); /* 标准的语法 */
    }

     

    转载于:https://www.cnblogs.com/xulei1992/p/10224246.html

    更多相关内容
  • CSS3线性渐变 CSS3渐变属性 01 CSS3渐变属性 在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。 CSS3渐变属性 css3中定义了两种渐变类型:...
  • css3线性渐变

    2021-04-13 23:25:36
    css线性渐变 定义与用法 linear-gradient() 函数用于创建一个线性渐变的 “图像”。 为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko...

    css3线性渐变

    定义与用法

    linear-gradient() 函数用于创建一个线性渐变的 “图像”。

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

    语法

    linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> ) 
    

    <angle>

    用角度值指定渐变的方向(或角度)。角度顺时针增加。 0度表示渐变方向从下向上,90度表示渐变从左向右。其角度按照顺时针方向增加。单位为deg

    <side-or-corner>
    通过关键字定义渐变的方向。具有两个关键字,一个表示水平位置( left或right),一个表示垂直位置( top或bottom)。关键字的先后顺序无影响,井且都是可选的。

    <linear-color-stop>

    由一个<color>值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的<lenght>)。CSS渐变的颜色渲染采取了与SVG相同的规则。

    <color-hint>

    颜色中转点是一个插值提示,它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略,颜色转换的中点是两个颜色停止之间的中点。

    实例

    基础线性渐变

    要创建最基本的渐变类型,您只需指定两种颜色即可。 这些被称为色标。 至少指定两个色标,也可以指定任意数量。

     .container>div:nth-child(1){
                background: linear-gradient(red , yellow);
            }
    

    效果

    渐变提示

    默认情况下,渐变会平滑地从一种颜色过渡到另一种颜色。你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中, 我们将渐变的中心点由50%设为10%。

    .container>div:nth-child(2){
                background: linear-gradient( red , 10%,yellow);
            }
    

    效果

    改变渐变方向

    默认情况下,线性渐变的方向是从上到下, 你可以指定一个值来改变渐变的方向。

    .container>div:nth-child(4){
                /*
                    * background: linear-gradient(side-or-corner, color-stop1, color-stop2, ...);
                    * side-or-corner -通过关键字方式定义线性渐变的基准线的方向
                    *color-stop 一表示线性渐变的颜色以及位置
                */
                background: linear-gradient(to right, red, yellow);
            }
    

    效果

    设置渐变角度

    如果你想要更精确地控制渐变的方向,你可以给渐变设置一个具体的角度。

    .container>div:nth-child(4){
                /*
                    * background: linear-gradient(angle, color-stop1, color-stop2, ...);
                    * angle -表示线性渐殳的基准线的角度 单位为deg
                    *color-stop 一表示线性渐变的颜色以及位置
                */
                background: linear-gradient(0deg, red , yellow);
            }
    

    效果

    在使用角度的时候, 0deg 代表渐变方向为从下到上, 90deg 代表渐变方向为从左到右,诸如此类正角度都属于顺时针方向。 而负角度意味着逆时针方向。

    对角线渐变

    你甚至可以设置渐变方向为从一个对角到另一个对角。

    .container>div:nth-child(5){
                background: linear-gradient(to bottom right, red, yellow);
            }
    

    效果

    使用多种颜色

    无需局限于使用两种颜色,你想使用多少种颜色都可以! 默认情况下,所设置颜色会均匀分布在渐变路径中。

    .container>div:nth-child(7){
                background: linear-gradient(to right, red,yellow,green);
            }
    

    效果

    颜色终止位置

    你不需要让你设置的颜色在默认位置终止。 你可以通过给每个颜色设置0,1%或者2%或者其他的绝对数值来调整它们的位置。如果你将位置设置为百分数, 0% 表示起始点, 而100%表示终点,但是如果需要的话你也可以设置这个范围之外的其他值来达到你想要的效果。如果有些位置你没有明确设置,那么它将会被自动计算,第一种颜色会在0%处停止,而最后一种颜色是100%,至于其他颜色则是在它邻近的两种颜色的中间停止。

    .multicolor-linear { 
       background: linear-gradient(to left, lime 28px, red 77%, cyan);
    }
    

    效果

    颜色透明度

    渐变支持透明度,所以你可以使用透明度来实现一些漂亮的效果。

    .container>div:nth-child(8){
                background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
            }
    

    效果

    展开全文
  • 主要为大家详细介绍了CSS3 渐变(Gradients)之CSS3 线性渐变的相关资料,了解学习CSS3 线性渐变,感兴趣的小伙伴们可以参考一下
  • CSS3线性渐变的使用方法希望对您以后学习和理解css线性渐变起到作用,这是我一直希望看到的,感谢您的浏览,如果有什么意见可以留言
  • 本文为大家介绍下css3 线性渐变和径向渐变的应用示例,线性渐变:ie6以下不兼容;径向渐变:只支持firefox、Chrome和Safari,需要的朋友可以参考下
  • 如果您在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反其道而行之,否则rightleft

    我们也可以创建使用对角线梯度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的渐变也是可能的。 要创建效果,我们需要转换颜色hexrgba模式并降低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

    更快地编写语法

    正如你可以在上面看到,为了保持梯度兼容性跨浏览器 ,我们需要添加哪些代码的五个行是低效的

    我们有许多方法可以简化任务。 如使用无前缀PrefixrLESS萨斯来帮助编译代码,但首先,我们建议使用此工具, ColorZilla梯度 。 该工具将简单地生成渐变所需的所有代码,以在所有浏览器中正常工作。

    最后的话

    我们已经创建渐变讨论颇多今天,我们已经调查了语法的各个部分,创建透明效果和保持浏览器的兼容性 。 所以,在这一点上,我们希望你已经有一个关于这个问题的更好的理解

    仍然有许多事情,我们计划在未来岗位上CSS3渐变探索,敬请调到Hongkiat.com。 最后,感谢您阅读本文,我们希望您喜欢它。

    进一步阅读


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

    展开全文
  • CSS3线性渐变指南

    2021-08-04 05:53:17
    如果您在CSS3中使用过渐变,那么您可能熟悉两种方法:径向渐变和线性渐变。今天的文章主要讨论后者。创建渐变正如规范中所说,CSS3中的渐变是一个图像,它不像其他新添加的特性那样具有特殊属性,所以它是使用...

    渐变是CSS3中很棒的色彩功能,它不仅可以只添加一种颜色,还可以在一个声明块中添加多种颜色组合,而无需依赖图像,这可以减少我们网站中的HTTP请求,从而使网站加载速度更快。

    如果您在CSS3中使用过渐变,那么您可能熟悉两种方法:径向渐变和线性渐变。今天的文章主要讨论后者。

    创建渐变

    正如规范中所说,CSS3中的渐变是一个图像,它不像其他新添加的特性那样具有特殊属性,所以它是使用background-image属性声明的。

    如果我们看一下渐变的完整语法,它看起来有点臃肿,这可能会导致一些人的困惑。

    1  div {

    2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    7  }

    所以,让我们一个一个深入到语法的每一部分,使事情更清楚。

    首先,使用linear-gradient()函数声明线性梯度,该函数有三个主要值。第一个值定义了渐变的起始位置,你可以使用一个描述性的关键字,如顶部开始梯度流动从顶部;

    1  div {

    2  background-image: linear-gradient(top, #FF5A00, #FFAE00);

    3  }

    上面的代码片段是W3C创建渐变的官方版本,它实际上更简单,也很容易理解,它还会创建如下渐变。

    d35879f61e1271289dcc1697739c951e.png

    你也可以使用底部来做相反的事情,或者左右移动。

    我们还可以创建一个对角梯度使用角度作为梯度的起始位置。下面是一个例子:

    1  div {

    2  background-image: linear-gradient(45deg, #FF5A00, #FFAE00);

    3  }

    上面的代码段将创建以下颜色渐变:

    c586f6eb473d79129dda0fd1b2ac65c5.png

    函数的第二个值将告诉第一个颜色信息及其以百分比表示的停止位置,停止位置实际上是可选的;浏览器非常聪明,可以确定正确的位置,所以当我们不指定第一个颜色的停止时,浏览器将默认为0%。

    下一个值是第二个颜色组合。它的工作方式与之前的值类似,只是如果它是最后应用的颜色,并且我们没有指定停止位置,那么将使用100%作为默认值。现在,让我们看看下面的例子:

    1  div {

    2  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    3  }

    上面的代码段将创建一个渐变,就像我们之前看到的那样(没有区别),但现在我们指定颜色停止位置;

    a8f001b2898cba381ea90cf380fef9ca.png

    现在让我们改变颜色停止,这次我们将为第一种颜色指定50%为第二种颜色指定51%,让我们看看结果如何;

    1  div {

    2   background-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);

    3   }

    4ddeec936315723d47198427636021e7.png

    透明度

    在渐变中创建透明度也是可能的,为了创建效果,我们需要将颜色十六进制转换为rgba模式,并降低alpha通道。

    1  div {

    2  background-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));

    3  }

    上面的代码段将颜色强度降低20%,渐变效果如下:

    1e4645226aa72e96a00b58c7905daee5.png

    多种颜色

    如果您希望添加更多的颜色,只需使用逗号分隔符将颜色添加到另一个颜色旁边,并让浏览器确定每个颜色的停止位置。

    1  div {

    2  background-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);

    3  }

    上面的代码片段将创建下面的彩虹。

    ab74ea6535c2bc4475dd0bcd0c69dcce.png

    浏览器兼容性

    不幸的是,在撰写本文时,所有当前的浏览器都还没有支持标准语法。他们仍然需要厂商前缀(-webkit-、-moz-、-ms-和-o-)。所以,这就是为什么完整的语法看起来是这样的:

    1  div {

    2  background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    3  background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    4  background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    5  background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    6  background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

    7  }

    另一方面,Internet Explorer,特别是版本9或更低的版本,离标准还很远。在IE9和以下的渐变是用过滤器声明的,所以如果我们想在那些浏览器上添加渐变,我们必须这样写;

    1  div {

    2 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00,endColorstr=#FFAE00);

    3  }

    这个滤镜有它的局限性:首先,它不允许添加超过三种颜色,创建透明效果也有点棘手——它不允许rgba,但IE滤镜使用#ARGB;

    1  div {

    2  ilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00,endColorstr=#33FFAE00);

    3  }

    这是一个帮助你将rgba转换成#ARGB的工具。

    更快地编写语法

    正如您在上面看到的,为了保持跨浏览器的梯度兼容性,我们需要添加5行代码,这是低效的。

    我们有很多方法可以简化任务;例如使用无前缀,前缀,LESS或Sass来帮助编译代码,但最重要的是,我们建议使用这个工具,ColorZilla Gradient。该工具将简单地生成渐变在所有浏览器中工作所需的所有代码。

    最后

    今天我们已经讨论了很多关于创建渐变的内容,我们已经研究了语法的每个部分,创建透明的效果和维护浏览器的兼容性。所以,在这一点上,我们希望你已经有一个更好的理解这个主题。

    展开全文
  • 本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。线性渐变的完整语法:.demo {background: linear-gradient(to left, black, white...
  • css3渐变有两种,一种是线性渐变,语法是linear-gradient();一种是径向渐变,语法是radial-gradient();对于不同的浏览器可采用不同的前缀实现效果,ie中可以用滤镜实现渐变先了解线性渐变:* {margin: 0;padding: 0;...
  • 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法,多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变
  • css3线性渐变的渐变角度In a linear gradient, the colors flow in a single direction, for example from left to right, top to bottom, or any angle you choose. 在线性渐变中,颜色沿单个方向流动,例如从左到...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...线性渐变和径向渐变</title> <style type="text/css"> #dd{ width: 500px; height: 200px;
  • CSS3线性渐变(默认从上到下) 语法:#grad{background-image: linear-gradient(#e66465, #9198e5);} 从左到右:#grad{background-image: linear-gradient(to right, red , yellow);} 对角(左上到右下):#grad { ...
  • CSS3线性渐变(linear-gradient)

    千次阅读 2016-07-07 19:20:56
    主要整理了下CSS3线性渐变在各大浏览器下的兼容写法,各个方向渐变的使用用法以及多色线性渐变的简要写法!
  • css3 线性渐变

    2020-07-07 16:20:02
    .line { background: linear-gradient(to top, rgba(204, 204, 204, 0), rgba(204, 204, 204, 1), rgba(204, 204, 204, 0)); width: 1px; height: 30px; }
  • CSS3 线性渐变效果

    2021-03-23 11:02:02
    CSS3 定义了两种类型的...线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 资料: https://www.runoob.com/css3/css3-gradients.html ...
  • CSS3 线性渐变(linear-gradient)

    千次阅读 2021-06-07 15:12:43
    一、线性渐变的基础知识介绍 先利用flash的渐变变形工具了解一下线性渐变的原理。 设置了一个如图的线性渐变条,三个色彩,位置分别是0%,50%,100%, 默认左边第一个颜色是起始色,最后一个是终点色。 渐变的效果...
  • linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3线性渐变linear-gradient制作边框的示例
  • CSS3线性渐变

    2020-03-08 12:11:36
    CSS3线性渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 线性渐变(Linear Gradients) 创建一个线性渐变,必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。方向可以是上下、左右或者对角...
  • CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,542
精华内容 5,416
关键字:

css3线性渐变

友情链接: assignments.zip