css3之渐变背景色（linear-gradient）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3渐变背景色</title>

</head>

<!--

背景颜色线性渐变【linear-gradient】

语法：

background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；

起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角

过渡色：可以插入多个，表示多种颜色的渐变

 -->

<style>

    .linear-gradient{

        width: 1000px;

        margin:0 auto;

        text-align: center

    }

    .linear-gradient p{

        width: 100px;

        height: 100px;

        float: left;

        border:1px #999 solid;

        line-height: 100px;

        margin-right: 100px;

        font-size:20px;

    }

    .linear-gradient p:first-child{

        background:-webkit-linear-gradient(top,#09f,#fff,#0c0);

    }

    .linear-gradient p:last-child{

        background:-webkit-linear-gradient(20deg,#09f,#fff,#0c0);

    }

</style>

<body>

    <div class="linear-gradient">

        <p>普通渐变</p>

        <p>角度渐变</p>

    </div>

</body>

</html>
巴特西

css3之渐变背景色（linear-gradient）

最新文章

热门文章
