前端开发CSS3 各种渐变

网站前端开发研究内容
适合新手前端开发的网站
网站前端开发的作用

html 代码片段

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>css3渐变</title>
        <style>
            div {
                width: 400px;
                height: 150px;
                border: 1px solid #666;
                line-height: 150px;
                text-align: center;
                font-weight: 900;
                font-size: 30px;
                color: #fff;
                margin: 10px auto;
            }
            .totop {
                background-image: -webkit-linear-gradient(
                    to top,
                    orange,
                    green
                );
                background-image: linear-gradient(to top, orange, green);
            }
            .totop-deg {
                background-color: red;
                background-image: radial-gradient(
                    300px 130px at center center,
                    red,
                    #fff,
                    green
                );
            }
            .totop-deg3 {
                background-image: linear-gradient(-360deg, orange, green);
            }
            .totop-deg2 {
                background-image: linear-gradient(
                    to left,
                    red,
                    orange,
                    yellow,
                    green,
                    blue,
                    indigo,
                    violet
                );
            }
            .totop {
                background-image: linear-gradient(
                    to left,
                    rgba(255, 0, 0, 0) 0%,
                    rgba(255, 0, 0, 0.8) 7%,
                    rgba(255, 0, 0, 1) 11%,
                    rgba(255, 0, 0, 1) 12%,
                    rgba(255, 252, 0, 1) 28%,
                    rgba(1, 180, 7, 1) 45%,
                    rgba(0, 234, 255, 1) 60%,
                    rgba(0, 3, 144, 1) 75%,
                    rgba(255, 0, 198, 1) 88%,
                    rgba(255, 0, 198, 0.8) 93%,
                    rgba(255, 0, 198, 0) 100%
                );
            }
        </style>
    </head>
    <body>
        <div class=”totop”>自定义直线渐变</div>
        <div class=”totop-deg”>径向渐变</div>
        <div class=”totop-deg2″>多色线性渐变</div>
        <div class=”totop-deg3″>使用角度:-360deg</div>
    </body>
</html>
网站前端开发公司
网站开发前端和后端的区别
前端网站开发教程
» 本文来自:前端开发者 » 《前端开发CSS3 各种渐变》
» 本文链接地址:https://www.rokub.com/7455.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!