美文网首页
CSS3中实现渐变效果

CSS3中实现渐变效果

作者: LIsPeri | 来源:发表于2018-03-23 15:47 被阅读0次

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox /
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /
Saf4+, Chrome /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /
IE*/
-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。

第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

相关文章

  • css3渐变属性有哪些?CSS3渐变属性用法

    在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现...

  • CSS3中实现渐变效果

    background-image: -moz-linear-gradient(top, #8fa1ff, #375...

  • js特效篇---CSS3线性渐变实现图片闪光划过效果

    笔记 - CSS3线性渐变实现图片闪光划过效果 | 前端网(QDFuns) https://www.qdfuns...

  • 07. 变换和动画

    CSS3中的变换属性:transformCSS3中的渐变效果:transition 7.1 CSS3的变换类型 注...

  • CSS3线性渐变

    今天来谈谈CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首...

  • CSS3渐变效果工具

    推荐一个css3渐变效果工具,觉得有帮助的可以收藏下。 工具链接 CSS3 渐变(gradients)可以让你在两...

  • CSS3动态进度条

    CSS3的线性渐变生成动态进度条 渐变基本语法: 效果图如下:

  • 深入理解 linear-gradient()

    一、开言 相信大家都用过linear-gradient这个CSS3带来的特性,用来实现线性渐变效果。我们都知道它的...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • 渐变色彩

    CSS3 Gradient分为线性渐变(liner)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不...

网友评论

      本文标题:CSS3中实现渐变效果

      本文链接:https://www.haomeiwen.com/subject/sajxcftx.html