CSS渐变

最新推荐文章于 2024-08-30 18:57:49 发布

歪大梨

最新推荐文章于 2024-08-30 18:57:49 发布

阅读量118

点赞数

分类专栏：前端文章标签： css 前端 servlet

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126711837

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

1、线性渐变

2、径向渐变

3、练习

1、线性渐变

background-image:linear-gradient(direction,color1,color2....)

可以设置多个渐变，多个渐变之间可以用逗号隔开

重复的线性渐变：

background: repeating-linear-gradient(color1,color2...)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            width: 300px;
            height: 300px;
            margin: 10px;
        }
        .box:nth-child(1) {
            background: linear-gradient(red,yellow);
        }
        .box:nth-child(2) {
            background: -webkit-linear-gradient(right,red,yellow);
            background: linear-gradient(right, red,yellow);
        }
        .box:nth-child(3) {
            background: linear-gradient(to right, red,yellow);
        }
        .box:nth-child(4) {
            background: linear-gradient(to top, red,orange,yellow,green,cyan,blue,purple);
        }
        .box:nth-child(5) {
            background: linear-gradient(to right top, red,orange,yellow,green,cyan,blue,purple);
        }
        .box:nth-child(6) {
            /* 默认的渐变方式是从上往下的 */
            /* background: linear-gradient(blue 100px,red 200px); */
            /* background: linear-gradient(blue 150px,red 150px); */
            background: linear-gradient(blue 50%,red 50%);
        }
        .box:nth-child(7) { 
            background: linear-gradient(to right,blue 33.3%,white 33.3%,white 66.6%,red 66.6%);
        }
        .box:nth-child(8) { 
            /* 不是背景颜色 */
            background-image: linear-gradient(to right,blue 33.3%,white 33.3%,white 66.6%,red 66.6%);
        }
        .box:nth-child(9) {
            /* 默认的渐变方式是从上往下的 */
            /* background: linear-gradient(blue 100px,red 200px); */
            /* background: linear-gradient(blue 150px,red 150px); */
            background: linear-gradient(rgba(0,0,255,.2) 50%,rgba(255,0,0,.2) 50%),linear-gradient(to right,rgba(255,0,0,.2) 50%,rgba(255,255,0,.2) 50%);
        }
        .box:nth-child(10) {
            background: repeating-linear-gradient(red,yellow 20%);
        }
        .box:nth-child(11) {
            background: repeating-linear-gradient(red 20%,yellow 40%);
        }
    </style>
</head>
<body>
  

     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</body>
</html>

结果

2、径向渐变

background:radial-gradient(color1,color2....)

渐变的形状默认是椭圆，如果需要修改成圆形，circle

重复的径向渐变：background:repeating-radial-gradient(color1,color2....)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            width: 300px;
            height: 200px;
            margin: 10px;
        }
        .box:nth-child(1) {
            background: radial-gradient(red,yellow);
        }
        .box:nth-child(2) {
            background: radial-gradient(red 50%,yellow);
        }
        .box:nth-child(3) {
            background: radial-gradient(red 50%,yellow 50%);
        }
        .box:nth-child(4) {
            background: radial-gradient(circle,red 50%,yellow 50%);
        }
        .box:nth-child(5) {
            background: radial-gradient(circle at top,red 50%,yellow 50%);
        }
        .box:nth-child(6) {
            background: radial-gradient(circle at left top,red,yellow);
        }
        .box:nth-child(7) {
            background: radial-gradient(circle at 0px 0px,red,yellow);
        }
        .box:nth-child(8) {
            background: repeating-radial-gradient(red 10%,yellow 20%);
        }
    </style>
</head>
<body>


     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</body>
</html>

结果：

3、练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            float: left;
            margin-right: 10px;
        }
        .box:nth-child(1) {
            background:repeating-linear-gradient(#33baf1 0%,#33baf1 10%,#00abed 10%,#00abed 20%);
        }
        .box:nth-child(2) {
            background:repeating-linear-gradient(to right top,#33baf1 0%,#33baf1 10%,#00abed 10%,#00abed 20%);
        }
        .box:nth-child(3) {
            background:repeating-linear-gradient(to right,#33baf1 0%,#33baf1 10%,#00abed 10%,#00abed 20%);
        }
        .box:nth-child(4) {
            background:linear-gradient(to right top,#BBD534 50%,#ABCC01 50%);
        }
        .box:nth-child(5) {
            background:linear-gradient(to right top,#BBD534 50%,#ABCC01 50%);
            background-size: 50px 50px;
        }
        .box:nth-child(6) {
            background: linear-gradient(rgba(255,0,0,.2) 50%,rgba(255,255,255,.2) 50%),linear-gradient(to right,rgba(255,0,0,.2) 50%,rgba(255,255,255,.2) 50%);
        }
        .box:nth-child(7) {
            background: linear-gradient(rgba(255,0,0,.2) 50%,rgba(255,255,255,.2) 50%),linear-gradient(to right,rgba(255,0,0,.2) 50%,rgba(255,255,255,.2) 50%);
            background-size:20px 20px ;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

效果：