css控制背景颜色渐变

最新推荐文章于 2025-07-30 10:26:01 发布

原创最新推荐文章于 2025-07-30 10:26:01 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

Web前端专栏收录该内容

44 篇文章

订阅专栏

本文深入探讨了CSS中背景渐变的实现方法，包括如何使用不同浏览器的特定语法来创建从左到右和从上到下的渐变效果。

/*-----------由左至右渐变-------------*/

body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=1); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(left,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(left, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, left top, right top, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(left, #00108B, white);}/*IE10*/

/*-----------由上至下渐变-------------*/

body{ width:100%; height:105px; margin:0 auto;
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00108B,endcolorstr=white,gradientType=0); /*IE8*/
background:white; /* 一些不支持背景渐变的浏览器 */
background:-o-linear-gradient(top,#00108B 0%,white); /*opera*/
background:-moz-linear-gradient(top, #00108B, white); /*firefox*/
background:-webkit-gradient(linear, 0 0, 0 500, from(#00108B), to(rgba(0, 0, 255, 0)));} /*chrome,safari*/
background:-ms-linear-gradient(top, #00108B, white);}/*IE10*/