層示意圖：

效果就是這樣了：

鼠標(biāo)沒有放上去的時(shí)候，先把 border 層隱藏掉。

.border-layer {
 ...
  visibility: hidden;
}
.calendar:hover .border-layer {
  visibility: visible;
}

CSS Mask

CSS Mask 類似于 Photoshop 中的圖層蒙版，可以使用一張圖作為蒙版用作在目標(biāo)元素上，圖片的 alpha 通道（也就是透明度信息）決定了目標(biāo)元素哪部分可見（也可以選擇使用亮度信息）。

舉個(gè)例子，如果蒙版圖片是一張半透明圖，則作用到實(shí)際元素上效果和設(shè)置 opacity: 0.5 效果一樣；如果蒙版圖片是一張中間鏤空的五角星，則效果就是元素被裁剪成五角星形狀。

Mask 的語法和 background 的語法幾乎完全一致，這里我們用徑向漸變創(chuàng)建一個(gè)半徑 80px 從中心白色到邊緣透明的漸變圓，配合 mask-repeat 和 mask-size 防止 repeat 和變形。

  -webkit-mask-image: radial-gradient(circle at center, white 0%, transparent 80px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 160px 160px; /* 半徑80px 所以 size 需要是 160px */

接下來我們來更新 mask-position 。這里有兩個(gè)點(diǎn)要注意，一是獲取鼠標(biāo)對(duì)目標(biāo)元素的相對(duì)坐標(biāo)，一是 position 偏移。

MouseEvent 中有一堆的 X/Y，我們用相對(duì) document 的坐標(biāo) pageX/pageY，減去目標(biāo)元素相對(duì) document 的坐標(biāo)，就能得到我們需要的坐標(biāo)了。 向量公式： AB = AC - BC：

不過，這里 mask-position 的坐標(biāo)還需要處理一下。我們定義的 mask 是一張 160x160 的圓形漸變，而 mask-position 和 background-position 一樣,定義的是蒙層左上角 (0，0) 的位置實(shí)際需要和容器的哪個(gè)坐標(biāo)對(duì)齊。因此我們需要把計(jì)算得到的坐標(biāo)再減去 (80, 80) 才能讓漸變中心和鼠標(biāo)的坐標(biāo)保持一致。

var borderLayer = document.querySelector(".border-layer");
document.querySelector(".calendar").addEventListener("mousemove", function(ev){
  var x = ev.pageX;
  var y = ev.pageY;
  var bounding = borderLayer.getBoundingClientRect();
  borderLayer.style.webkitMaskPosition = `${x - bounding.x - 80}px ${y -bounding.y - 80}px`;
});

感謝各位的閱讀，以上就是“怎么用CSS實(shí)現(xiàn)仿Windows10鼠標(biāo)照亮邊框效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用CSS實(shí)現(xiàn)仿Windows10鼠標(biāo)照亮邊框效果這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！