找回密码
当前位置：前端开发者 > CSS > 正文

CSS3 颜色渐变

2018-10-12 分类：CSS 阅读(1491) 评论(0)

web前端开发字体下载 web前端开发的实例下载 前端项目开发下载

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        header {
            text-align: center;
            line-height: 60px;
        }
        section {
            width: 200px;
            height: 200px;
            border: 2px solid #ddd;
            float: left;
            margin: 20px;
            border-radius: 10px;
            background: #fff;
            position: relative;
        }
        section h3 {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            color: blue;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        section:hover h3 {
            display: block;
        }
        .content {
            width: 150px;
            height: 150px;
            margin: 25px;
        }
        .item:nth-of-type(1) .content {
            /*线性渐变*/
            background-image: linear-gradient(yellow, red);
        }
        /*多个颜色线性渐变*/
        .item:nth-of-type(2) .content {
            background-image: linear-gradient(skyblue, yellow, pink, orange);
        }
        /*过渡线性渐变*/
        .item:nth-of-type(3) .content {
            background-image: linear-gradient(#aaa, #bbb, #ccc, #ddd, #eee, #fff);
        }
        .item:nth-of-type(4) .content {
            /*渐变方向默认从上到下 linear-gradient(1):从上到下; */
            background-image: linear-gradient(#abc, #afa, #af0);
        }
        .item:nth-of-type(5) .content {
            background-image: linear-gradient(45deg, #abc, #afa, #af0);
        }
        .item:nth-of-type(6) .content {
            background-image: linear-gradient(to right top, #abc, #afa, #af0);
        }
        .item:nth-of-type(7) .content {
            background-image: linear-gradient(90deg, #abc, #afa, #af0);
        }
        .item:nth-of-type(8) .content {
            background-image: linear-gradient(to right bottom, #abc, #afa, #af0);
        }
        .item:nth-of-type(9),
        .item:nth-of-type(9) h3 {
            width: 930px;
        }
        .item:nth-of-type(9) .content {
            background-image: linear-gradient(to right, #fff, #fff 10%, #000 10%, #000 20%, #fff 20%, #fff 30%, #000 30%, #000 40%, #fff 40%, #fff 50%, #000 50%, #000 60%, #fff 60%, #fff 70%, #000 70%, #000 80%, #fff 80%, #fff 90%, #000 90%, #000 100%);
            width: 880px;
        }
        .item:nth-of-type(10) .content {
            /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/
            background-image: radial-gradient(100px at left top, #abc, #afa, #af0);
        }
        .item:nth-of-type(11) .content {
            /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/
            background-image: radial-gradient(100px at 50px 100px, #abc, #afa, #af0);
        }
        .item:nth-of-type(12) .content {
            /*径向渐变:沿着半径方向渐变; radial-gradient() 圆心位置在盒子最中心,由内向外扩散 ,辐射半径决定中心变化区域大小,圆心点位置: at left… / at 100px 50px*/
            background-image: radial-gradient(100px at 50px 100px, #abc 10%, #afa 80%, #af0);
        }
        .item:nth-of-type(13) .content {
            background-image: repeating-linear-gradient(to left, pink 10%, gray 30%);
        }
        .item:nth-of-type(14) .content {
            background-image: repeating-linear-gradient(to left, #000, #000 5%, #fff 5%, #fff 10%);
        }
        .item:nth-of-type(15) .content {
            background-image: repeating-radial-gradient(10px at center center, pink, pink 5%, gray 5%, gray 10%);
        }
        .item:nth-of-type(16) .content {
            background-image: repeating-radial-gradient(10px at center center, pink, gray);
        }
        .item:nth-of-type(17) .content {
            width: 120px;
            height: 60px;
            text-align: center;
            border-radius: 5px;
            font-family: “黑体”;
            color: #fff;
            line-height: 60px;
            margin-top: 60px;
            background: green;
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
            /*background-image: linear-gradient(#007F00,#004000);*/
        }
        .item:nth-of-type(18) .content {
            border-radius: 50%;
            background: blue;
            background-image: radial-gradient(100px at 40px 40px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
            /*background-image: radial-gradient(120px at 40px 40px,#0000FF,#000065);*/
        }
        .item:nth-of-type(19) .content {
            width: 150px;
            height: 50px;
            margin-top: 75px;
            background-image: repeating-linear-gradient(-45deg, #008000, #008000 14%, #FFFF00 14%, #FFFF00 25%);
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class=”container”>
        <header>
            <h2>渐变</h2>
        </header>
        <section class=”item”>
            <h3>线性渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>多个颜色线性渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>过渡线性渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>渐变方向(默认)</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>渐变方向45度</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>渐变方向右上</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>渐变方向90度</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>渐变方向右</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>控制渐变(斑马线)</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>径向渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>径向渐变圆心控制</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>径向渐变颜色过渡控制</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>重复线性渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>重复线性渐变(斑马线)</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>重复径向渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>重复径向渐变</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>立体按钮</h3>
            <div class=”content”>按钮</div>
        </section>
        <section class=”item”>
            <h3>立体球</h3>
            <div class=”content”></div>
        </section>
        <section class=”item”>
            <h3>进度条</h3>
            <div class=”content”></div>
        </section>
    </div>
</body>
</html>

web前端开发论文模板下载 前端开发视频下载 前端开发文件的下载

赞(0)
前端开发者 » CSS3 颜色渐变
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论