关于渐变属 gradient：

一、background: linear-gradient(0deg, black, transparent 100%)——线性渐变

第一个值指明渐变方向，0deg是由下向上渐变，90deg是由左向右渐变，180deg有上向下渐变，270deg是由右向左渐变；也可用to+方位表示，如 to top=0deg,to right=90deg,to bottom=180deg,to bottom=270deg.

第二个值是起始颜色，中间可以指定多种颜色，最后是终止颜色；

Webkit引擎（Chrome和Safari），Genko引擎（Firefox），Presto引擎（Opera），Trident引擎（IE）的私有语法和和W3C的标准语法非常像。区别如下：

需要加上前缀，分别是-webkit-，-moz-，-ms-
-webkit-，-ms-的第一个参数的关键字表示起始位置，因此不需要加to。例如-webkit-linear-gradient(top, #fff, #000);等价于W3C标准语法的linear-gradient(to bottom, #fff, #000);
-moz-的第一个参数的关键字可以可不加to。不加to表示起始位置，加to表示终止位置。例如-moz-linear-gradient(top, #fff, #000);等价于-moz-linear-gradient(to bottom, #fff, #000);
IE10以下是不支持渐变的…因此没有私有语法
Opera从37开始支持，试了下并没有私有语法，加上-o-前缀反而不认…

我们还可以在颜色后面添加百分比%，用来表示多大范围内有什么颜色渐变，例如linear-gradient(to bottom, yellow 0%, #9C117A 20%, #EF137A 80%, #f00 100%);。第一个颜色渐变范围0-20%，第二个颜色渐变范围20-80%，第三个颜色渐变范围80-100%，第四个颜色渐变范围100-100%渐变，等于第四个颜色没有渐变。

二、background:radial-gradient(shape size at position, start-color, last-color)——径向渐变
　　1、shape ：确定圆的类型，ellipse (默认): 指定椭圆形的径向渐变，
　　　　　　　　　　　　　　　circle ：指定正圆形的径向渐变；

2、size ：定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

3、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。 <
top：设置顶部为径向渐变圆心的纵坐标值。 li> bottom：设置底部为径向渐变圆心的纵坐标值。

4、start-color, last-color起始颜色，终止颜色。

转载于:https://www.cnblogs.com/guanyushan/p/7989805.html

关于渐变属 gradient：相关推荐

CSS实现兼容性的渐变背景(gradient)效果（转）
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=743 一.有点俗态 ...
html渐变不兼容,CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
一.有点俗态的开场白要是两年前,实现"兼容性的渐变效果"这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持 ...
Qt Quick里的图形效果——渐变（Gradient）
Qt Quick提供了三种渐变图形效果: ConicalGradient,锥形渐变 LinearGradient,线性渐变 RadialGradient,径向渐变效果下图是我设计的示例效果: 图 ...
渐变填充Gradient
渐变,是指逐渐的,有规律性的变化,是一种规律性很强的现象.Qt提供了一个与渐变相关的QGradient类,目前支持三种渐变画刷,分别是线性渐变(QLinearGradient).辐射渐变(QRadia ...
Css3: gradient背景渐变
Css3: gradient背景渐变原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
CSS3渐变——gradient
渐变是CSS3中的一个新加特性,可以让颜色之间平稳过渡,让页面样式更为炫酷书写渐变属性时,注意添加前缀(不同浏览器的兼容性不同) 线性渐变liner-gradient 沿着一根隐形的轴线,从起点到终 ...
聊一聊CSS3的渐变——gradient
关于渐变时下,渐变(gradient)效果在页面设计中已经变得越来越常见了.而且现在的CSS3对于渐变的支持也已经足够的丰富了.虽然我们可能使用过CSS3中的line-gradient属性或radi ...
QML 矩形颜色横向渐变(gradient和LinearGradient)
<矩形颜色横向渐变> 1. gradient 颜色渐变 2. LinearGradient 线性渐变所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章 ...
css3渐变放大CSS3 教程,css3渐变gradient – CSS3高级教程
CSS3的渐变功能允许你在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变. 使用CSS3渐变 CSS3的渐变特性提供了一个灵活的解决方案来生成两个或多个颜色之间的平滑过渡.早些时候,为了达到这 ...

关于渐变属 gradient：

关于渐变属 gradient：相关推荐

最新文章

热门文章