码迷,mamicode.com
首页 > Web开发 > 详细

css3渐变之线性渐变

时间:2017-06-12 18:54:10      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:右上角   bsp   cti   ...   -o   rect   等等   code   top   

  css3定义了两种类型的渐变,即线性渐变和径向渐变。这里我要说的是线性渐变。

  为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

  语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);

  注意:线性渐变默认是从上到下。

  从上到下的渐变:

  #grad {

       background: -webkit-linear-gradient(red, blue); /*Safari与chrome*/

       background: -o-linear-gradient(red, blue); /*opera*/

       background: -moz-linear-gradient(red, blue); /* Firefox */

       background: linear-gradient(red, blue); /* 标准的语法 */

     }

 

  从左到右的渐变:

  #grad {

      background: -webkit-linear-gradient(left, red , blue); /*Safari与chrome*/

      background: -o-linear-gradient(right, red, blue); /*opera*/

      background: -moz-linear-gradient(right, red, blue); /* Firefox*/

      background: linear-gradient(to right, red , blue); /* 标准的语法 */

      }

 

  对角的线性渐变,如从右上角到左下角的渐变

  #grad {

      background: -webkit-linear-gradient(top right, red , blue); /*Safari与chrome*/

      background: -o-linear-gradient(top right, red, blue); /*opera*/

      background: -moz-linear-gradient(top right, red, blue); /* Firefox*/

      background: linear-gradient(to bottom left, red , blue); /* 标准的语法 */

      }

  如果想要对渐变做更精确的控制,可以使用角度。

  语法:background: linear-gradient(angle, color-stop1, color-stop2);

          技术分享

  0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

  注意:有些浏览器使用了旧的标准,如Safari浏览器(个人亲测)。即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

 

  最后,说一下浏览器的支持情况,因为该属性并不是所有浏览器都支持,因此某些浏览器需要写上前缀才能支持。

  技术分享

  表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

 

  注意:

    1、渐变的方向问题:如right与to right是完全相反的方向,right表示从右往左,而to right则表示从左往右。其他的也是如此,如left与to left、bottom与to bottom等等。

    2、渐变的角度问题:有些浏览器沿用了旧的标准,如0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

    3、浏览器支持情况:对于某些旧版本的浏览器需要写上相应的前缀。

  

css3渐变之线性渐变

标签:右上角   bsp   cti   ...   -o   rect   等等   code   top   

原文地址:http://www.cnblogs.com/jf-67/p/6994367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!