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没有的，可实现特殊效果
3. box-shadow
不响应事件，不占据空间
影分身，作用很多
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. 额外元素
标签：遮罩,outline,实现,方法,元素,100px,rgb,shadow,border From： https://www.cnblogs.com/mengff/p/17850123.html