HTML颜色渐变效果

最新推荐文章于 2023-07-22 15:29:40 发布

代码编编◐

最新推荐文章于 2023-07-22 15:29:40 发布

阅读量1.3k

点赞数 1

分类专栏：笔记文章标签： html5 css3

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117636658

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、线性渐变
创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定
义终止色，终止色是平滑过渡后的颜色。

2、径向渐变
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有
方向混合。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变效果</title>
    <style>
        div{
            width: 100px;
            height: 200px;
            float: left;
            margin-left: 10px;   
        }

        /* 线性渐变 */
        .b1{
            /* 颜色渐变方向，渐变的角度 起始颜色 结束颜色 */
            background: linear-gradient(to bottom, red, green);
        }
        .b2{
            background: linear-gradient(to top, orange, yellow);
        }
        .b3{
            background: linear-gradient(90deg, blue, pink);
        }
        .b4{
            background: linear-gradient(45deg, rgb(255, 21, 216), rgb(0, 238, 255));
        }

        /* 径向渐变 */
        .b5{
            /* 圆：circle */
            background: radial-gradient(circle,red, green);
        }
        .b6{
            /* 椭圆：ellipse */
            background: radial-gradient(ellipse, red, green);
        }
        .b7{
            /* 60% 70% =》左右 上下 */
            background: radial-gradient(100% 30%,red, green);
        }
        .b8{
            /* 
                前缀：‘-webkit-’谷歌； ‘-moz-’火狐； ‘-o-（opera）’浏览器； 
                注意：使用渐变大小时，注意需要加前缀生效
             */
            background: -webkit-radial-gradient(farthest-side,  rgb(255, 21, 216), rgb(0, 238, 255),  blue, pink);
        }
    </style>
</head>
<body>
    <!-- 线性渐变 -->
    <div class="b1">to bottom</div>
    <div class="b2">to top</div>
    <div class="b3">90度</div>
    <div class="b4">45度</div>

    <!-- 径向渐变 -->
    <div class="b5">1</div>
    <div class="b6">2</div>
    <div class="b7">3</div>
    <div class="b8">4</div>
</body>
</html>

效果图如下：

代码编编◐

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML颜色渐变效果

1、线性渐变创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定义终止色，终止色是平滑过渡后的颜色。2、径向渐变CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte
复制链接

扫一扫