使用div+css实现背景颜色渐变，怎么实现呢？

发布网友 发布时间：2022-04-22 04:45

我来回答

共2个回答

热心网友 时间：2024-02-03 02:24

利用css3可实现背景颜色渐变：

一、线性渐变：

    1、线性渐变在 Mozilla 下的应用

　　语法：

     -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

  2、线性渐变在 Webkit 下的应用

　　语法： 

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

3、线性渐变在 Opera 下的应用

　　语法：

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

二 径向渐变

  语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

 -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

热心网友 时间：2024-02-03 02:24

如果只要求兼容高级浏览器，CSS3可以解决。

.box{width:500px;height:100px;background-image: -moz-linear-gradient(top , #45B5DA, #0382AD);background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));background-image: -o-linear-gradient(top , #45B5DA, #0382AD);}

如果要兼容低级浏览器，例如IE6，还是用背景图片重复吧。

上面的这属性可以在CSS手册里查到。