CSS3的探索之路一_（小玩意儿）

来源：互联网发布：vb6数据库实例贴吧编辑：程序博客网时间：2024/05/24 05:47

背景颜色渐变属性：

标准语法：

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

从上到下的渐变：

  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(red, blue); /* 标准的语法 */

从左到右的渐变：

  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(to right, red , blue); /* 标准的语法 */

从左上角到右下角：

  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

自定义角度：

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

例如：

  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */  background: linear-gradient(180deg, red, blue); /* 标准的语法 */

阅读全文

0 0