css3使用 linear-gradient 设置线性渐变

最新推荐文章于 2024-03-20 02:01:24 发布

先给自己打个气

最新推荐文章于 2024-03-20 02:01:24 发布

阅读量483

点赞数

分类专栏： JavaScript 文章标签： html css3 css html5

本文链接：https://blog.csdn.net/qq_40641206/article/details/104161809

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

linear-gradient 设置线性渐变

语法：linear-gradient （方向？颜色列表）方向默认从上到下
方向参数支持如下参数值。
► to top: 代表从下到上。
► to bottom: 代表从上到下。这是默认值。
► to left: 代表从右到左。
► to right: 代表从左到右。
► to left top: 代表从右下角到左上角。
► to right top: 代表从左下角到右上角。
► to left bottom: 代表从右上角到左下角。
► to right bottom: 代表从左上角到右下角。
► Ndeg: 指定角度值。其中 0deg 代表 12 点方向，该角度值代表顺时针转过的角度。

<!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>
     div{
        position: absolute;
        left: 200px;
        top:100px;
        width: 100px;
        height: 100px;
        background:linear-gradient(to left,red,yellow,blue);
     }
     #targin{
        position: absolute;
        left: 500px;
     }

    </style>
</head>
<body>
    <div></div>
    <div id="targin"></div>
    <!-- this.innerHTML获得内容值 -->
    <button οnclick="change(this.innerHTML);">to top</button>
    <button οnclick="change(this.innerHTML);">to bottom</button>
    <button οnclick="change(this.innerHTML);">to reft</button>
    <button οnclick="change(this.innerHTML);">to right</button>
    <button οnclick="change(this.innerHTML);">to left top</button>
    <button οnclick="change(this.innerHTML);">to right top</button>
    <button οnclick="change(this.innerHTML);">to left bottom</button>
    <button οnclick="change(this.innerHTML);">to right bottom</button>
    <input type="range" style="width: 360px;" min="0" max="360" value="0" οninput="cg(this.value);" >
    <script>
        function change(val){
            document.getElementById("targin").style.background="linear-gradient("+val+",red,yellow,blue)";
        }
        // 控制方向的角度来控制线性渐变
        function cg(val){
            document.getElementById("targin").style.background = "linear-gradient("+val+"deg,red,yellow,blue)"
        }
    </script>
</body>
</html>

在这里插入图片描述

先给自己打个气

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3使用 linear-gradient 设置线性渐变

linear-gradient 设置线性渐变语法：linear-gradient （方向？颜色列表）方向默认从上到下方向参数支持如下参数值。► to top: 代表从下到上。► to bottom: 代表从上到下。这是默认值。► to left: 代表从右到左。► to right: 代表从左到右。► to left top: 代表从右下角到左上角。► to right to...
复制链接

扫一扫