设置圆的渐变色

最新推荐文章于 2024-03-05 17:26:49 发布

张续栋

最新推荐文章于 2024-03-05 17:26:49 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_44984407/article/details/105823418

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

对于颜色渐变css有着对应的属性

字体颜色渐变

  .tongji-header{
            width: 150px;
            height: 30px;
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
          background: linear-gradient(to right, #01ffff, #0f8dff);
          -webkit-background-clip: text;
          color: transparent;
        }

  <div class="tongji">
             <div class="tongji-header">数据统计 :</div>
             <div style="margin-top: 5px; margin-bottom: 25px; height: 1px; width: 60px; background: linear-gradient(to right, #01ffff, #0f8dff)"></div>
             </div>

下面是效果：
在这里插入图片描述

边框颜色渐变：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>边框渐变</title>
    <style>
        .circle {
            width: 200px;
            height: 200px;
           
            text-align: center;
            margin: 100px;
            background-color: red;
        }

        .semi-circle {
           border border-radius: 50%;

            border: 20px solid red;
            
            border-image: -moz-linear-gradient(green,blue);
                border-image: -webkit-linear-gradient(green,blue);
                border-image: linear-gradient(to right,green,blue) 30 30;
        }
    </style>
</head>

<body>
    <div class="circle semi-circle"></div>

</body>

</html>

效果：
在这里插入图片描述

如果不需要设置圆形，用border-image:完全可以设置边框渐变
但是如果需要设置圆的颜色渐变这样就不可以了，因为border border-radius不能和border-image: line-gradien兼容 就是设置就border-radius也是不生效的

圆的颜色渐变

 .tongji-top{
            position: relative;
            display: flex;
            align-content:space-around;
          width: 90%;
          height: 199px;
          margin-bottom: 20px;
            /* background-image: linear-gradient(
            #073e64,
            #073e64),
            linear-gradient(
            #0a2043,
            #0a2043); */
            background-blend-mode: normal,
            normal;
            border: solid 1px #01fffd;
            /* opacity: 0.33; */
           
        }
   .tongji-top-yuan{
         height:0;
         width:25%;
         margin: 25px 18px ;
         padding-bottom:25%;
         border-radius: 50%;
          position: relative;
          border: 1px solid transparent;
          border-bottom: 0;
          background-color: #073f6c;
          background-clip: padding-box;
         
          /* padding: 10px; */
          }
        .tongji-top-yuan span {
            display: block;
            margin: 0 auto;
            text-align: center;
            font-size:  60px;
             background: linear-gradient(to right, red, blue);
             -webkit-background-clip: text;
              color: transparent;
        }


                <div class="tongji-top">
                    <div class="tongji-top-left"></div>
                     <div class="tongji-top-right"></div>
                     <div class="tongji-top-yuan tongji-top-yuan1"><span>3</span></div>
                     <div class="tongji-top-yuan tongji-top-yuan2"><span>44</span></div>
                     <div class="tongji-top-yuan tongji-top-yuan3"><span>71</span></div>
                </div>

效果：
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>圆边框渐变</title>
    <style type="text/css">
        .son-box {
            position: relative;
            width: 200px;
            height: 200px;
            line-height: 200px;
            border-radius: 50%; // //使之保持圆形状态
            background: white;
            text-align: center;
            margin: 0 auto;
            margin-top: 120px;
        }

        .son-box::after {
            position: absolute;
            content: '';
            background: linear-gradient(red, yellow);
            bottom: 0;
            right: 0;
            left: 0;
            top: 0;
            z-index: -1;
            transform: scale(1.3);  //伪元素放大1.3倍
            border-radius: 50%;  // //使之保持圆形状态
        }
          .son-box span {
         display: block;
         margin: 0 auto;
         text-align: center;
         font-size: 60px;
         background: linear-gradient(to right, red, blue);
         -webkit-background-clip: text;
         color: transparent;
         }
    </style>
</head>

<body>
    <div class="son-box"> <span>张续栋</span> </div>
</body>

</html>

效果：在这里插入图片描述

张续栋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设置圆的渐变色

对于颜色渐变css有着对应的属性字体颜色渐变 .tongji-header{ width: 150px; height: 30px; font-family: MicrosoftYaHei; font-size: 18px; font-weight: normal; ...
复制链接

扫一扫