css3新特性第四章(渐变)

最新推荐文章于 2025-04-25 15:39:06 发布

星空寻流年

最新推荐文章于 2025-04-25 15:39:06 发布

阅读量1.2k

点赞数 20

分类专栏：前端基础文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/qq_36260963/article/details/147367027

版权

前端基础专栏收录该内容

20 篇文章

订阅专栏

渐变

线性渐变
径向渐变
重复渐变
使用：

background-image: xx 渐变

background-image: linear-gradient(red,yellow,green);

公共代码

 .box {
       width: 300px;
       height: 200px;
       border: 1px solid black;
       float: left;
       margin-left: 30px;
       margin-top: 30px;
       text-align: center;
       line-height: 200px;
       font-size: 20px;
     }
<body>
    <div class="box box1">线性渐变-默认方式，从上到下</div>
    <div class="box box2">线性渐变-使用关键字</div>
    <div class="box box3">线性渐变-使用角度</div>
    <div class="box box4">线性渐变-使用像素位置 </div>
    <div class="box box5">线性渐变演示效果</div>
</body>

2.1 线性渐变

一条线一条线的变化，看起来是同一水平线；

使用：background-image: linear-gradient（颜色1,颜色2，颜色3）

默认多个颜色渐变

background-image: linear-gradient(red,yellow,green);

在这里插入图片描述

总结：多个颜色之间的渐变，默认从上到下渐变

使用关键词设置渐变方向

/* 第二种方式关键词设置方向 */

.box2 {

/* 从下到上 */

/* background-image: linear-gradient(to top,red,yellow,green); */

/* 到右上角那么右上角就是绿色 */

background-image: linear-gradient(to right top,red,yellow,green);

}

在这里插入图片描述

使用角度单位设置渐变方向

/* 第三种方式使用角度 */

.box3 {

background-image: linear-gradient(30deg,red,yellow,green);

}

在这里插入图片描述

使用像素位置设置渐变方向

/* 第四种方式使用位置 */

.box4 {

background-image: linear-gradient(red 50px,yellow 100px,green 150px);

}

在这里插入图片描述

小设计综合

.box5 {

background-image: linear-gradient(375deg,red 50px,yellow 100px,green 150px);

font-size: 40px;

color: transparent;

font-weight: bold;

/* */

-webkit-background-clip: text;

}

在这里插入图片描述

2.2 径向渐变

多个颜色从圆心散开，最终是一个圆形，从而为径向渐变，有半径

默认多个颜色渐变

默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

/* 第一种方式默认从圆心向四周发散 */

.box1 {

background-image: radial-gradient(red,yellow,green);

}

在这里插入图片描述

关键字设置渐变位置

/* 第二种方式关键字从右上角发散 */

.box2 {

background-image: radial-gradient(at right top,red,yellow,green);

}

在这里插入图片描述

使用像素值调整渐变圆的圆心位置

/* 第三种方式像素从x轴开始 */

.box3 {

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

}

在这里插入图片描述

调整渐变形状为正圆

/* 第四种方式正圆，本来默认是根据容器的宽高计算，如果是正方形默认就是圆心了 */

.box4 {

background-image: radial-gradient(circle,red,yellow,green);

}

在这里插入图片描述

圆心半径

/* 圆心半径 */

.box5 {

background-image: radial-gradient(150px,red,yellow,green);

}

在这里插入图片描述

2.3 重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。
使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient 。

我们可以利用渐变，做出很多有意思的效果：例如：横格纸、立体球等等。

重复径向线性渐变

使用方法
- repeating-linear-gradient：单位

  .box {
       width: 300px;
       height: 200px;
       border: 1px solid black;
       float: left;
       margin-left: 30px;
       margin-top: 30px;
       text-align: center;
       line-height: 200px;
       font-size: 20px;
     }
<body>
    <div class="box box1">重复渐变-线性渐变</div>
  
</body>

/* 第四种方式使用位置 */

.box1 {

background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);

}

在这里插入图片描述

重复径向渐变

.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 30px;
margin-top: 30px;
text-align: center;
line-height: 200px;
font-size: 20px;
}

/* 第四种方式使用位置 */
.box1 {
background-image: repeating-linear-gradient(red 50px,yellow 100px,green 150px);
}

.box2 {
background-image: repeating-radial-gradient(circle,red 50px,yellow 100px,green 150px);
}

重复渐变-线性渐变

重复渐变-镜像渐变

在这里插入图片描述

应用小案例

在这里插入图片描述

代码

<style>
     .box {
       width: 900px;
       height: 700px;
       border: 1px solid black;
       margin: 20px auto;
       padding: 15px;
     }

     .box1 {
       background-image: repeating-linear-gradient(transparent 0,transparent 34px,gray 35px);
       background-clip: content-box;
     }

     .ball {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        position: relative;
     }


     .ball-1,.ball-2 {
       background-image: repeating-radial-gradient(white 0,#333 100px);
     }

     .ball-3,.ball-4 {
       background-image: repeating-radial-gradient(at 80px 80px ,white,#333);
     }


     .ball-1 {
       position: absolute;
       top: 10px;
       left: 20px;
     }

     .ball-2 {
       position: absolute;
       top: 10px;
       right: 20px;
     }

     
     .ball-3 {
       position: absolute;
       bottom: 10px;
       left: 20px;
     }

     .ball-4 {
       position: absolute;
       bottom: 10px;
       right: 20px;
     }
     

  </style>


</head>
<body>
    <div class="box box1"></div>
    <div class="float-ball">
        <div class="ball ball-1"></div>
        <div class="ball ball-2"></div>
        <div class="ball ball-3"></div>
        <div class="ball ball-4"></div>
    </div>
</body>