linear-gradient设置线性渐变

最新推荐文章于 2024-05-09 20:59:01 发布

WYG2020

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量224

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/wyg2020/article/details/104162013

版权

背景颜色。
八个按钮，不同方向的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    background:linear-gradient(red,blue)、红蓝线形渐变
    <div id="dvl" style="background: linear-gradient(red,blue);"></div>
    <button onclick="change(this.innerHTML);">to top</button>
    <button onclick="change(this.innerHTML);">to bottom</button>
    <button onclick="change(this.innerHTML);">to left</button>
    <button onclick="change(this.innerHTML);">to right</button>
    <button onclick="change(this.innerHTML);">to left top</button>
    <button onclick="change(this.innerHTML);">to right top</button>
    <button onclick="change(this.innerHTML);">to left bottom</button>
    <button onclick="change(this.innerHTML);">to right bottom</button>
    <script type="text/javascript">
        function change(val){
            document.getElementById("dvl").style.background=
            "linear-gradient(" + val +",red,blue)";
        }
    </script>
</body>
</html>

滑动条实现不同方向的线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div{
            height: 300px;
            width: 300px;
            border-radius: 150px;
        }
    </style>
</head>
<body>
    background:linear-gradient(0deg,red,blue)、红蓝线形渐变
    <div id="dvl" style="background: linear-gradient(0deg,red,blue);"></div>
    角度: <input type="range" style="width: 360px;" min="0" max="360" value="0"
    oninput="change(this.value);">
    <script type="text/javascript">
        function change(val){
            document.getElementById("dvl").style.background=
            "linear-gradient(" + val +"deg,red,blue)";
        }
    </script>
</body>
</html>