前端的学习之路：初级CSS---线性渐变

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

new-SkyWaller

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

阅读量259

点赞数

分类专栏：初级CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113774992

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.25.02.css"> -->
    <style>
        .box1{
            width: 200px;
            height: 200px;
            float: left;
            /* 
            通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
            ！！渐变是图片，需要通过background-image来设置

                线性渐变，颜色沿着一条直线发生变化
                    linear-gradient()

                     linear-gradient(red,yelow)红色在开头，黄色在结尾。中间是过渡区域
                     -线性渐变的开头，我们可以指定一个渐变的方向
                            to left 
                            to right
                            to top
                            to bottom 默认值
                            xxxdeg deg表示度数(角度)
                            turn 表示圈
                    -渐变可以同时指定多个颜色，对各颜色默认情况下平均分配        
                    也可以手动指定渐变的分布情况 
                   background-image: repeating-linear-gradient()可以平铺的线性渐变 
                                        默认值是0-100px,也可以设置渐变方向 
            */
            /* background-image: linear-gradient(to top,red, yellow); */
            /* background-image: linear-gradient(90deg,green,yellow); */
           /* background-image: linear-gradient(red,green,orange,#bfa); */
            /* background-image: linear-gradient(red 50px,yellow 70px); */
             /* red 50px 表示50px是纯红色 yellow 70px是纯黄色，中间就是渐变的过渡区域了 */
            background-image: repeating-linear-gradient(red 50px,yellow 100px);
            /* 这里表示50px-100px之间是红色到黄色的线性渐变 */
            }
            .box2{
                float: left;
            width:200px;
            height: 200px;
            background-image: linear-gradient(red 50px,yellow 70px); 
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

运行结果为：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级CSS---线性渐变

线性渐变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线性渐变</title> <!-- <link rel="stylesheet" href=
复制链接

扫一扫