咳咳，首先講個題外話，原本我是做 c++/qt 的，然而因為工作 ( 部分原因 ) 學起了前端。
當然，這也並不意味著我會丟掉 c++/qt/qml 這些 ( 會接著更新 )，只是額外增加一些前端相關的文章而已。
再者，也想著自己搭個** ( 或是部落格 )，所以學學前端也是必然的。
目前學到了 css動畫 這部分，按照我的習慣，肯定是要實現些好玩的東西。
回想起王者裡面很炫酷的頭像框，大概這樣：
當然，王者這種用的是粒子特效，而我們只需仿乙個效果即可。
那麼，如何用 css 實現乙個簡易版呢。
開始，很容易想到的是四個 模擬四個方向的邊框：
想法很容易，結果實現起來相當複雜，直接 pass 掉。
然後搜了下相關的實現，結果都不是很滿意 ( 都很複雜 )。
最終我還是找到乙個類似的效果，思路很巧妙：
沿著這個思路，聯想到 css 中的標準盒模型，最後我實現的效果如下：
全部**如下：
CSS實現多重邊框
想到多重邊框，我們可能會通過多個元素來模擬實現，但是如何在乙個元素上實現多重邊框呢？如下圖 我們可以通過box shadow來實現。box shadow h shadow v shadow blur spread color inset outset 分別是 水平陰影位置 垂直陰影位置 模糊距離 擴...
css 科技 邊框 CSS 邊框
邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值，比如 2px 或 0.1em 或者使用 3 個關鍵字之一，它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度，所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...
css 科技 邊框 CSS 邊框
邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值，比如 2px 或 0.1em 或者使用 3 個關鍵字之一，它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度，所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...