一个div,给他一个足够大的border或者box-shadow,或者 outline均可 .box{ width:100px; height:100px; outline:1000px solid #000 } 这样就形成的中间是镂空的,其他地方都是黑色的
刚想的一个、最简单的一种,通过 背景色、字体颜色、元素层级关系 模拟实现 <div style="**background-color: black**;height: 2em;" > <div id="text" style="display: inline-block;color: black;position: relative;height: 2em;z-index: 2;"> DJHKDKDJDKDJLKDJDDKJD </div> <div id="cover" style="left:15px;background-color: #FFFFFF;display: inline-block;position: absolute;height: 2em;width:2em;z-index: 1;"></div> </div>
一个
div
,给他一个足够大的border
或者box-shadow
,或者outline
均可这样就形成的中间是镂空的,其他地方都是黑色的
刚想的一个、最简单的一种,通过 背景色、字体颜色、元素层级关系 模拟实现
想到两个方案:
<div>
覆盖到页面上,中间露出一个洞,根据你想要的位置调整。clip-path
属性实现看上去的确可行,也没有什么兼容问题。
border
需要移动的时候减去位置outline
倒是不需要减去上左边距