css特殊或少见样式整理二

修改svg图的颜色

 <div class="changeSvg">
   <img src="./img/小喇叭.svg" alt="">
   <img class="changeSvgColor" src="./img/小喇叭.svg" alt="">
 </div>
  .changeSvgColor {
   position: relative;
   transform: translateX(-80px);
   filter: drop-shadow(#f00 80px 0);
 }

文字平分一行

  <div class="plateLineTxt">
    平分的字
  </div>
  .plateLineTxt {
    width: 10rem;
    display: inline-block;
    text-align: justify;
    margin-right: 1rem;
    height: 2rem
    &::after {
      content: "";
      display: inline-block;
      width: 100%;
    }
  }

mask切矩形

  <div class="mask"></div>
  .mask {
      width: 30rem;
      height: 3rem;
      background-color: blueviolet;
      mask: linear-gradient(135deg, red 90%, transparent 90%), linear-gradient(45deg, red 90%, transparent 90%);
}

利用伪元素控制下边框的宽度

  <div class="selectMember">33333333</div>
  .selectMember {
    width: 10rem;
    text-align: center;
    color: #1975FF;
    margin-bottom: 3rem;
  }  
  .selectMember::after {
    content: '';
    width: 2rem;
    height: 1px;
    display: block;
    margin: 0 auto;
    padding-top: 0.5rem;
    border-bottom: 2px solid #1975FF;
  }

通过border-ridus把矩形切个弧形出来

  <img src="./img/科技.png" alt="">
  <img class="borderImg" src="./img/科技.png" alt="">
  .borderImg {
    border-radius: 100% 100% 100% 100% / 0% 0% 150% 150%;
  }