空心圆样式（css 遮罩层样式）

小刘忙着搞前端

于 2023-04-06 17:07:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.csdn.net/mkijnbgt/article/details/129993681

文章介绍了CSS中的mask属性，它允许开发者通过透明区域隐藏或显示元素，类似于Photoshop的遮罩功能。mask属性支持使用图像、渐变等作为遮罩，并能与动画结合，实现丰富的视觉效果。文中还提到了相关属性如mask-image、mask-repeat等，帮助读者深入理解并应用mask。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <div class="LeftR">
    <div class="leftround">  
    </div>
    <div class="LRText">
      <div class="LTNum">{{Arr.OSum}}<span style="font-size: 0.2rem;">/L</span></div>
      <span>加油总量</span>         
    </div>
  </div>

.leftround{
   width: 1.6rem;
   height: 1.6rem;  
   border-radius: 1rem; 
   background: linear-gradient(0deg, #36A5ED 0%, #fd4d4d 100%);
   -webkit-mask: radial-gradient(transparent, transparent 0.75rem, #000 0.75rem);
   mask: radial-gradient(transparent 0.75rem, #000 0.75rem); 
   position: relative;
   z-index: 5;
 }

最主要的就是 mask 属性，即遮罩属性

它可以用于隐藏或部分隐藏一个元素的可见区域，类似于PS中的遮罩概念
对于遮罩
- 如果元素添加了遮罩属性，那么目标元素将会按照遮罩的形状来显示
  - 遮罩透明的区域，元素也会透明，即该区域被隐藏
- 通常，遮罩可以是透明的图片或者是带渐变的元素
属性值：
- mask-image
- mask-repeat
- mask-position
- mask-clip
- mask-origin
- mask-size
- mask-mode
- mask-composite

参考链接：【CSS】mask遮罩 - 掘金 (juejin.cn)

这里面有mask与到动画的结合：简单说 CSS中的mask—好好利用mask-image_盏茶作酒的博客-CSDN博客

空心圆样式 （css 遮罩层样式）

空心圆样式（css 遮罩层样式）