vue通过css实现页面的挖空效果(某一块高亮)

本文已参与[新人创作礼]活动，一起开启掘金创作之路

如图

目录

一： 使用box-shadow

二： 使用border

三： 使用clip-path

---

方法一：使用box-shadow

获取节点在页面的具体位置,然后通过外阴影将外部置灰

• 创建节点

 <div ref='li_2'>

• 然后获取节点信息

 mounted() {
    const Dom = this.$refs.li_2[0]
    this.BoundingClientRect = Dom.getBoundingClientRect()
  },

• 页面添加蒙层

 <div class="mask" :style="{top:BoundingClientRect.y+'px',left:BoundingClientRect.x+'px',width:BoundingClientRect.width+'px',height:BoundingClientRect.height+'px'}"></div>

• 最后写css

.mask{
    position: fixed;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
    z-index: 99999;
    &::before{
      content: ' ';
      display: block;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
    }
  }

---

方法二：使用border

获取节点在页面的具体位置,然后通过外边框将外部置灰

• 创建节点

 <div ref='li_2'>

• 然后获取节点信息

 mounted() {
    const Dom = this.$refs.li_2[0]
    this.BoundingClientRect = Dom.getBoundingClientRect()
  },

• 页面添加蒙层

 <div class="mask" :style="{top:BoundingClientRect.y+'px',left:BoundingClientRect.x+'px',width:BoundingClientRect.width+'px',height:BoundingClientRect.height+'px'}"></div>

• 最后写css

.mask{
    position: fixed;
    border: 100vh solid rgba(0,0,0,0.5);
    box-sizing: content-box;
    z-index: 99999;
    margin-left: -100vh;
    margin-top: -100vh;
  }

---

方法三：使用clip-path

获取节点在页面的具体位置,然后通过clip-path从0 0 出发,向内绘画节点的大小,最后回到0 0,并再次走完四个边即可

• 创建节点

 <div ref='li_2'>

• 然后获取节点信息

 mounted() {
    const Dom = this.$refs.li_2[0]
    this.BoundingClientRect = Dom.getBoundingClientRect()
  },

• 页面添加蒙层

 <div class="mask" :style="{'--top':BoundingClientRect.y+'px','--left':BoundingClientRect.x+'px','--right':(BoundingClientRect.x+BoundingClientRect.width)+'px','--bottom':(BoundingClientRect.y+BoundingClientRect.height)+'px'}"></div>

• 最后写css

.mask{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99999;
    &::before{
      content: ' ';
      display: block;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0,0,0,0.5);
      top: 0;
      left: 0;
      //从0 0 出发，画一圈矩形后，回到0 0，然后再到页面的四个角，就可以将页面挖出来了（So:这个方法可以挖不规则的图像）
      clip-path: polygon(0 0,var(--left) var(--top),var(--right) var(--top),var(--right) var(--bottom),var(--left) var(--bottom),var(--left) var(--top),0 0,0 100%,100% 100%, 100% 0,0 0);
    }
  }