前端必知：26.渐变效果

最新推荐文章于 2024-07-11 18:23:29 发布

小姚学前端

最新推荐文章于 2024-07-11 18:23:29 发布

阅读量351

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131882904

版权

HTHL+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

渐变

1.线性渐变

linear-gradient 里面的参数

2.径向渐变

radial-gradient 设置径向渐变

渐变

渐变，至少ie10支持渐变也是背景图的一种

渐变分为

1.线性渐变

background: linear-gradient(to 方向，颜色开始渐变的位置，

颜色开始渐变的位置。。。。。)

linear-gradient 里面的参数

1.to方向，方向可以使用具体的方向单词，也可以使用角度度数

如果是度数则直接写具体角度，不需要加to

正值：顺时针旋转 0-> 向上 90->向右 180->向下

负值：逆时针旋转

开始渐变的位置可以是具体的数值也可以是百分比

2.径向渐变

radial-gradient 设置径向渐变

radial-gradient（半径形状 at 圆心，颜色渐变的开始位置，颜色渐变的开始位置。。。）

形状的可选值：

circle 圆形，默认值可以省略

半径可以是具体的数值，也可以是如下系统给定的值：

farthest-corner 最远角

closest-corner 最近角

farthest-side 最远边

closest-side 最近边

圆心的设置

1.可以是具体数值，第一个数字代表x方向，第二个数字代表y方向

2.可以是 left top bottom right center 等方向名词的组合

渐变的开始位置

1.可以是具体的数值

2.可以是百分比，百分比是以半径长度为基准

3.案例

1.绘制德国国旗，锯齿线，公路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: linear-gradient(180deg,rgb(0, 0, 0) 33%,rgb(250, 1, 43) 33%,rgb(250, 1, 43) 66%,rgb(245, 205, 5) 66%);
           
        }
        .wp1{
            width: 300px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: linear-gradient(180deg,rgb(0, 0, 0) 33%,rgb(250, 1, 43) 33%,rgb(250, 1, 43) 66%,rgb(245, 205, 5) 66%) no-repeat;
            background-size: 40px 30px;
        }
        .wp3{
            width: 300px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: linear-gradient(135deg,rgb(255, 255, 255) 20%,rgb(250, 1, 43) 20%,rgb(250, 1, 43) 66%,rgb(245, 5, 5) 66%) no-repeat;
          
        }
        .case{
            height: 100px;
            background: linear-gradient(135deg,rgba(0,0,0,0)0%,rgba(0,0,0,0)20%,#04be02 20%,#04be02 100%) repeat-x;
            background-size: 20px 20px;
        }
        .wp4{
            
            height: 100px;
            border: 1px #f00 solid;
            margin: 0 auto;
            padding-top: 80px;
            background:#000 linear-gradient(90deg ,rgba(0,0,0,0) 50%,#fff 50%) repeat-x;
            background-size: 200px 20px;
            background-origin: content-box;
        }
        .wp5{
            height: 100px;
            background:#000 linear-gradient(90deg,#fff 0, #fff 50px,transparent 50px, transparent 100px) repeat-x 0 center;
            background-size: 100px 20px;
        }
    </style>
</head>
<body>
    <!-- 
        渐变，至少ie10支持   渐变也是背景图的一种

        渐变分为
        1.线性渐变
             background: linear-gradient(to 方向，颜色 开始渐变的位置，
             颜色 开始渐变的位置。。。。。)
              
             linear-gradient 里面的参数
             1.to方向 ，方向可以使用具体的方向单词，也可以使用角度度数
             如果是度数则直接写具体角度，不需要加to
             正值：顺时针旋转  0-> 向上  90->向右  180->向下
             负值：逆时针旋转

             开始渐变的位置可以是具体的数值也可以是百分比
            
        2.径向渐变

     -->
    <div class="wp"></div>
    <div class="wp1"></div>
    <div class="wp3"></div>
    <div class="case"></div>
    <div class="wp4"></div>
    <div class="wp5"></div>
</body>
</html>

2.靶心以及相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7{
            width: 200px;
            height: 200px;
            border: 1px #f00 solid;
            margin: 20px auto;
            background: radial-gradient(100px at 0 0,#f00 0%,#0f0 50%,
            #ff0 100%
            
            
            );
        }
        .wp2{
            background: radial-gradient(100px  at 0 0,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
        .bx{
            width: 300px;
            height: 300px;
            border: 1px #f00 solid;
            border-radius: 50%;
            margin: 0 auto;
            background: radial-gradient(150px at 150px,#000 0px,#000 50px,#fff 50px,
            #fff 100px,#000 100px,#000 150px
    
            );
        }
        .wp3{
            background: radial-gradient(farthest-corner at 20px 30px,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
        .wp4{
            background: radial-gradient(closest-corner at 20px 30px,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
        .wp5{
            background: radial-gradient(farthest-side at 20px 30px,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
        .wp6{
            background: radial-gradient(closest-side at 20px 30px,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
        .wp7{
            background: radial-gradient(50px at center center,#f00 0%,#0f0 50%,
            #ff0 100%
            );
        }
    </style>
</head>
<body>
    <!-- 
        radial-gradient 设置径向渐变
        radial-gradient（半径 形状 at 圆心，颜色 渐变的开始位置，颜色 渐变的开始位置。。。）
        
        形状的可选值：
        circle 圆形 ，默认值可以省略
        
         
        半径可以是具体的数值，也可以是如下系统给定的值：
        farthest-corner 最远角
        closest-corner 最近角
         farthest-side 最远边
        closest-side 最近边

        圆心的设置
        1.可以是具体数值，第一个数字代表x方向，第二个数字代表y方向
        2.可以是 left top bottom right center 等方向名词的组合
        

        渐变的开始位置
        1.可以是具体的数值
        2.可以是百分比，百分比是以半径长度为基准
     -->
    <div class="wp">1</div>
    <div class="wp2">2</div>
    <h2>farthest-corner 最远角</h2>
    <div class="wp3">3</div>
    <h2>closest-corner 最近角</h2>
    <div class="wp4">4</div>
    <h2>farthest-side 最远边</h2>
    <div class="wp5">5</div>
    <h2>closest-side 最近边
    </h2>
    <div class="wp6">6</div>
      
    <h2>方位名词组合</h2>
    <div class="wp7"></div>



    <h2>练习</h2>
    <div class="bx"></div>
</body>
</html>