css实现新手引导

1,775 阅读1分钟

css 实现新手引导

初步方案:

利用 css 的 border 属性,创建一个无限大的 border

border:9999px solid rgba(0,0,0,0.75);

该方法有个缺点,就是无论box-sizing设成什么值,都无法很好的定位该元素

第二个方案:

利用 css 的 outline 属性,同理创建一个无限大的 outline outlineborder 差不多,不过 outline 不占据空间

outline: 9999px solid rgba(0,0,0,0.5);

该方法也有个明显的不足,没有类似于 border-radius 的属性,只能创建方形的 outline,不能创建圆角,如下图所示

img_1

终极方案:

box-shadow

box-shadow来创建一个无限大的投影,代码如下:

box-shadow:0 0 0 9999px rgba(0,0,0,0.75);

img_2