css如何实现颜色的渐变??

html-css020

css如何实现颜色的渐变??,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{width:200pxheight:150pxbackground:linear-gradient(red,white)}

3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。

css3可以实现的:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>gradient-transform</title>

    <style>

    body{margin: 0}

    #demo{

        width: 500px

        height: 200px

        /*渐变*/

        background: linear-gradient(left,blue,#fff)

        background: -ms-linear-gradient(left,blue,#fff)

        background: -webkit-linear-gradient(left,blue,#fff)

        background: -o-linear-gradient(left,blue,#fff)

        background: -moz-linear-gradient(left,blue,#fff)

        /*圆角*/

       /* border-top-left-radius: 20px

        border-bottom-right-radius: 20px*/

    }

   .2demo2{

        -moz-transform:scaleY(-1)

        -webkit-transform:scaleY(-1)

        -o-transform:scaleY(-1)

        transform:scaleY(-1)

        /*IE*/

        filter:FlipV

    }

    </style>

</head>

<body>

    <div id="demo"></div>

</body>

</html>

你看下背景从蓝色变成白色。。

如果你要不斜的渐变估计实现起来比较难。

有用就采纳把~~~

左到右;

上到下:

.hbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D')}

.vbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D')}