• 技术文章 >web前端 >css教程

    css3线性渐变语法的详解(代码示例)

    青灯夜游青灯夜游2018-11-05 14:54:27原创2285
    本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

    线性渐变的完整语法:

    .demo  {   
        background: linear-gradient(to left, black, white);
    }

    效果:

    1.jpg

    兼容性写法:

    要使线性渐变适用于所有支持的浏览器,可以这样做:

    .demo {	
    	/* IE6 & IE7 */
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
    	
    	/* IE8+ */
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
    	
    	/* Safari 4 +,Chrome 2+  */
    	background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
    	
    	/* Safari 5.1 - 6.0 */
    	background: -webkit-linear-gradient(right, black, white);
    	
    	/* Firefox 3.6 - 15 */
    	background: -moz-linear-gradient(right, black, white);
    	
    	/* Opera 11.1 - 12.0 */
    	background: -o-linear-gradient(right, black, white);
    	
    	/* 标准的语法 */
    	background: linear-gradient(to left, black, white);
    	
    }

    效果如上图一样。

    渐变角度或起点

    线性渐变时通过指定直线渐变线,然后沿该线放置几种颜色来创建的渐变。我们可以通过设置,来为渐变提供方向。

    我们可以以有两种方式来设置渐变线的方向:

    1、声明渐变所采用的角度,

    2、使用关键字,告诉浏览器渐变从哪里开始。

    在上述的例子中,我们告诉它从右边开始向左边,这相当于角度“-90deg”。所以这会产生相同的结果:

    background: linear-gradient(-90deg, black, white);

    效果图:

    1.jpg

    如果使用“270deg”角度,也会显示相同的结果,相当于“-90deg”。

    因此,我们可以使用其中一个位置关键字(顶部,右侧,左侧,底部),或者只是以数字方式给它一个特定的角度,它将找出从哪里开始。

    终止颜色和位置

    终止位置

    使用简单的线性渐变,你只需要两个终止颜色,而无需指定位置(如上述例子所示)。但在下面的示例:

    background: linear-gradient(-90deg, black 50%, white 100%);

    我们会注意到这已将每种颜色的位置包含在百分比值中。

    效果图:

    1.jpg

    这告诉浏览器每种颜色de渐变要从哪开始从哪结束(规定颜色的长度)。浏览器自然会找出实际的渐变; 你只需告诉它“渐进变化”应该完全“停止”的地方。在上面的示例中,“渐变”会在元素的左边停止,因此你在该元素中看不到太多(如果有)全白。

    终止颜色

    添加色块不是很复杂了, 只需添加任意数量的逗号分隔值即可。这是彩虹的CSS:

    .demo  {
       background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%)  ;
    }

    效果图:

    1.jpg

    关于线性渐变的一些注意事项:

    1、CSS3渐变不是属性,二是由浏览器呈现的图像;

    2、你可以在CSS中通过url(image.jpg)在任何位置使用渐变;

    3、创建渐变的语法实际上就是一个将各种值作为参数的函数;

    4、你还可以指定重复的线性渐变,这在某些情况下可以派上很大的用场;

    5、颜色终止位置的值可以用百分比表示,也可以用像素表示;

    6、对于色标,负百分比值(例如-20%)和百分比高于100%是完全有效的。

    总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

    以上就是css3线性渐变语法的详解(代码示例)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:线性渐变 css3
    上一篇:px,em,rem该选择哪个?css相对字体大小的详细介绍 下一篇:css相对定位和绝对定位的对比介绍

    相关文章推荐

    • CSS3中颜色线性渐变实战_html/css_WEB-ITnose• CSS线性渐变 垂直和水平渐变linear-gradient_html/css_WEB-ITnose• CSS3,线性渐变(linear-gradient)的使用总结• css3线性渐变入门实例分享

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网