網(wǎng)頁特效，顯示滑動(dòng)塊位置的內(nèi)容，隱藏其他位置的內(nèi)容

一個(gè)div，給他一個(gè)足夠大的border或者box-shadow，或者 outline均可

.box{
    width:100px;
    height:100px;
    outline:1000px solid #000
}

這樣就形成的中間是鏤空的，其他地方都是黑色的

剛想的一個(gè)、最簡單的一種，通過 背景色、字體顏色、元素層級(jí)關(guān)系 模擬實(shí)現(xiàn)

 <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>

想到兩個(gè)方案：

1. 用4個(gè) <div> 覆蓋到頁面上，中間露出一個(gè)洞，根據(jù)你想要的位置調(diào)整。
2. 用 clip-path 屬性實(shí)現(xiàn)

看上去的確可行，也沒有什么兼容問題。
border需要移動(dòng)的時(shí)候減去位置
outline倒是不需要減去上左邊距