強大的CSS ：實現仿 Windows10 鼠標照亮邊框效果
安裝最新 Windows 10 update 之後，註意到系統 UI 裏有一個很棒的細節效果，在開始菜單的磁貼裏或者 UWP 風格的設置界面中，元素的高亮邊框是可以感知鼠標的，邊框的高亮部分會跟隨鼠標的移動而移動。頓時靈機一動，這個效果用 CSS 可否實現？
這裏推薦一下我的前端學習交流扣qun：767273102 ，裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!
點擊：加入
分析
拿桌面日歷中的效果為例，鼠標移動時附近的邊框也漸變性可見。這個效果不就是探照燈效果嘛！這個完全可以用 CSS 中的 mask 蒙版配合一個徑向漸變實現。
但問題是，mask 蒙版是作用於整個元素的，沒辦法只作用於 border 而不影響內容。這個，那只能把 border 和實際內容分離用不同層來表示了。嗯，鼠標移動就更新蒙版位置，應該不成問題。
實現
準備工作
首先，擼好兩層日歷格子，一層展示日期信息，一層展示探照燈效果的邊框。用 flex 布局也好，grid 也好，哪怕 inline-block 也都是沒有問題的，這都不重要，重要的是上下兩層的格子一定要對齊，然後我們用 relative 的容器把這兩層 absolute 層圈起來，固定住。
<div class="calendar"> <div class="calendar-header"> <div class="week-day">一</div> <div class="week-day">二</div> <div class="week-day">三</div> <div class="week-day">四</div> <div class="week-day">五</div> <div class="week-day">六</div> <div class="week-day">日</div> </div> <div class="calendar-body"> <div class="grid-container border-layer"> <div class="grid-item"></div> ... <div class="grid-item"></div> </div> <div class="grid-container number-layer"> <div class="grid-item"><span>28</span><span>十四</span></div> <div class="grid-item"><span>29</span><span>十五</span></div> ... <div class="grid-item"><span>2</span><span>十九</span></div> </div> </div> </div>
層示意圖：
效果就是這樣了：
鼠標沒有放上去的時候，先把 border 層隱藏掉。
.border-layer {
...
visibility: hidden;
}
.calendar:hover .border-layer {
visibility: visible;
}
CSS Mask
CSS Mask 類似於 Photoshop 中的圖層蒙版，可以使用一張圖作為蒙版用作在目標元素上，圖片的 alpha 通道（也就是透明度信息）決定了目標元素哪部分可見（也可以選擇使用亮度信息）。
舉個例子，如果蒙版圖片是一張半透明圖，則作用到實際元素上效果和設置 opacity: 0.5 效果一樣；如果蒙版圖片是一張中間鏤空的五角星，則效果就是元素被裁剪成五角星形狀。
Mask 的語法和 background 的語法幾乎完全一致，這裏我們用徑向漸變創建一個半徑 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 。這裏有兩個點要註意，一是獲取鼠標對目標元素的相對坐標，一是 position 偏移。
MouseEvent 中有一堆的 X/Y，我們用相對 document 的坐標 pageX/pageY，減去目標元素相對 document 的坐標，就能得到我們需要的坐標了。 向量公式： AB = AC - BC：
不過，這裏 mask-position 的坐標還需要處理一下。我們定義的 mask 是一張 160x160 的圓形漸變，而 mask-position 和 background-position 一樣,定義的是蒙層左上角 (0，0) 的位置實際需要和容器的哪個坐標對齊。因此我們需要把計算得到的坐標再減去 (80, 80) 才能讓漸變中心和鼠標的坐標保持一致。
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`;
});
最終效果：codepen.io/liuxiaole-t…
後記
把 border 分層然後應用 mask 的方案只能是在特定場合下有效，分離另一個層增加了很多維護成本。在查閱 MDN 資料的時候，偶然發現居然有個貨叫 mask-border ，貌似是作用於 border 的 mask，目前還沒有瀏覽器實現。
強大的CSS ：實現仿 Windows10 鼠標照亮邊框效果