背景遮罩(蒙层)实现方法

1. border

可响应事件，占据空间

border: 100px solid rgb(0,0,0,.5);

2. outline

不响应事件，不占据空间

outline: 100px solid rgb(0,0,0,.5);

outline 支持 outline-color, outline-style, outline-width 和broder一样可以调整风格

支持多边框 outline: thick double #32a1ce;
支持圆角 border-radius可以使outline圆角 (chrome 94，safari 16.4)
支持外移 outline-offset 可使边框与元素产生一个距离，是border没有的，可实现特殊效果

outline-offset支持负值，可以做向内阴影，甚至是全阴影，也很强大

例如：遮盖超链接中的图片

<a href><img src="1.jpg"></a>

[href] > img:only-child:active {
   outline: 999px solid rgba(0,0,0,.05);
   outline-offset: -999px;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

3. box-shadow

不响应事件，不占据空间

影分身，向内，向外，全阴影，多重影分身，非常牛B

box-shadow: 0 0 0 100px rgb(0,0,0,.5);

drop-shadow 不行，阴影放大后会渐变，很淡

4. 伪元素::after

涉及到层级问题，可能无法覆盖高层级元素，需要调整

.con::after{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0,.5);
    top: 0;
    left: 0;
}

5. 额外元素

此种方法较为普通，在此不赘述

6. 按钮active反馈遮罩收集

body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);  /*针对Safari*/
}
[href]:active,
button:active {
    background-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05));      /*方法1*/
    box-shadow: inset 0 0 0 999px rgba(0,0,0,.05);                            /*方法2*/
    border-image: linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)) 1 fill;   /*方法3*/
}
[href] img:active {
    outline: 999px solid rgba(0,0,0,.05);
    outline-offset: -999px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /*裁切有用或者用overlfow:hidden*/
}