css圆角梯形，动态边框，居中分割线，三四行变色，圆形层叠

<style type="text/css">
            .aadiv {
              width: 80px;
              height: 80px;
              background-color: skyblue;
              border-radius: 8px;
            }

            .skewed {
                width: 80px;
                  height: 80px;
                position: relative;
                padding: .3em 1em  0;
                text-decoration: none;
                display: inline-block;
                border-radius: 8px;
              /*transform: skew(-10deg); 
              background-color: pink;
              border-radius: 8px;*/
            }
            .skewed::before{ 
                 content: '';
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: pink;
                 border: 1px solid #ff9900;
                 border-radius: 8px;
                -webkit-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -moz-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -ms-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -o-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
      
    　　　　　　　　　　z-index: -1;    
    　　　　　　　　　　-webkit-transform-origin:bottom right;  
                transform-origin:bottom right;      
             }
        </style>

<div class="aadiv">Normal</div>
<div class="skewed">Skewed</div>

 

<style>

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}
div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

</style>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>

 tabbar栏目中间加居中竖线，两种方法

.tabbar{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 120rpx;
        z-index:10;
        .tabbar-item{
        flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100rpx;
        position: relative;
        &:not(:last-child)::after {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
              width: 1px;
              height: 48rpx;        // 适当缩短，不要太长
              content: '';
              background:rgba(255, 179, 179, 1);
              /* background: linear-gradient(
                to bottom,
                transparent,
                rgba(255, 179, 179, 0.8),
                transparent
              ); */ // 渐变竖线，中间实两边虚，更美观
        }
            .item-img{
                margin-bottom: 4rpx;
                width: 46rpx;
                height: 46rpx;
            }
            .item-name{
                font-size: 26rpx;
                color: #666666;
            }
        }

    }

.tabbar{
        // border-top: 1px solid #C0C0C0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 120rpx;
        z-index:10;
        &::before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 60rpx;
            content: '';
            background-color: rgba(255, 179, 179, 1);
          }
        .tabbar-item{
            flex:1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100rpx;
            position: relative;
            .item-img{
                margin-bottom: 4rpx;
                width: 46rpx;
                height: 46rpx;
            }
            .item-name{
                font-size: 26rpx;
                color: #666666;
            }
        }

    }

 

三四行变色

<div class="boxNew-device-base-info flex-center mb-38">
        <ul class="box-info" id="jbxx">
                    <div class="flex-center-between boxNew-base-info-item">
                        <div class="info-label">除尘器编号：</div>
                        <div class="info-value">5#</div>
                    </div>
                    <div class="flex-center-between boxNew-base-info-item">
                        <div class="info-label">当前压差：</div>
                        <div class="info-value">456 Pa</div>
                    </div>
                    <div class="flex-center-between boxNew-base-info-item">
                        <div class="info-label">实际运行风量：</div>
                        <div class="info-value-special">1200 m³/h</div>
                    </div>
                    <div class="flex-center-between boxNew-base-info-item">
                        <div class="info-label">当前温度/湿度：</div>
                        <div class="info-value">26℃/68%</div>
                    </div>
    </ul>
</div>
.boxNew-base-info-item:nth-child(4n+3),
.boxNew-base-info-item:nth-child(4n+4) {
    background-color: rgba(0, 144, 255, 0.15);
}

 

圆形层叠

  <style type="text/css">
  .fs15{font-size: 15px;}
  .fs18{font-size: 18px;}
  .fs21{font-size: 21px;}
  .fc5 {color: #ffffff;}
  .fc6 {color: #402C10;}
  .relative{position: relative;}
  .grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
  }
  .tcBox2{
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background-color: #EFCB9B;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .tcBox21{
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background-color: #986D35;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footBox{
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .footBox1{
    position: absolute;
    display: flex;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  </style>
<div id="app">
  <div class=" relative" style="width:450px;height: 212px;">
  <div class="footBox1">
    <div class="grid4">
      <div class="tcBox2 fc6" v-for="(item,index) in tcData2" :key="index">
        <div class="fs18">{{item.type}}</div>
        <div class="fs21">{{item.val}}吨</div>
      </div>
    </div>
  </div>
  <div class="footBox">
    <div class="tcBox21 fc5" v-for="(item,index) in tcData21" :key="index">
      <div class="fs15">{{item.type}}</div>
      <div class="fs15">{{item.val}}t</div>
    </div>
  </div>
 </div>
</div>
<script>
let vm = new Vue({
    el: "#app",
    props: {},
    data() {
      return {
        tcData2:[
          {type:'S101',value:'2200',val:'2200'},
          {type:'S102',value:'2200',val:'2200'},
          {type:'S103',value:'2200',val:'2200'},
          {type:'S104',value:'2200',val:'2200'},
          {type:'S301',value:'2200',val:'2200'},
          {type:'S302',value:'2200',val:'2200'},
          {type:'S303',value:'2200',val:'2200'},
          {type:'S304',value:'2200',val:'2200'},
        ],
        tcData21:[
          {type:'S201',value:'650',val:'650'},
          {type:'S202',value:'650',val:'650'},
          {type:'S203',value:'650',val:'650'},
        ],
      }
    }
})
</script>