CSS3 线性渐变 linear-gradient 的使用

CSS3 定义了两种类型的渐变(gradients)

  1. 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  2. 径向渐变(Radial Gradients)- 由它们的中心定义

 

本文主要讨论的是线性渐变(Linear Gradients)的使用。

随着 CSS 的发展,渐变的背景实现除了用图片外,也可以直接用 CSS 样式。

1、Linear Gradients 用方向定义的语法如下:

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

其中:direction 为方向,如:top,bottom,left,right,left top,bottom right等;
color-stop* 为各个颜色值。


不同浏览器需要前缀的支持:
background: -webkit-linear-gradient(direction, color-stop1, color-stop2, …); /* Safari */
background: -o-linear-gradient(direction, color-stop1, color-stop2, …); /* Opera */
background: -moz-linear-gradient(direction, color-stop1, color-stop2, …); /* Firefox */
background: linear-gradient(direction, color-stop1, color-stop2, …); /* 标准的语法 */

2、如果需要用到角度,语法如下:

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

angle 角度是指水平线和渐变线之间的角度(如:0deg,90deg,180deg等角度),逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。换算公式 90 – x = y 其中 x 为标准角度,y为非标准角度。

相关文章