css 实现新手引导
初步方案:
利用 css 的 border 属性,创建一个无限大的 border
border:9999px solid rgba(0,0,0,0.75);
该方法有个缺点,就是无论box-sizing设成什么值,都无法很好的定位该元素
第二个方案:
利用 css 的 outline 属性,同理创建一个无限大的 outline
outline 与 border 差不多,不过 outline 不占据空间
outline: 9999px solid rgba(0,0,0,0.5);
该方法也有个明显的不足,没有类似于 border-radius 的属性,只能创建方形的 outline,不能创建圆角,如下图所示
终极方案:
box-shadow
用box-shadow来创建一个无限大的投影,代码如下:
box-shadow:0 0 0 9999px rgba(0,0,0,0.75);