JZTXT

遮罩实现方法

发布时间 2023-11-22 19:34:55作者: 看风景就

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. 额外元素