*以下技巧均源自於lea verou所著《css secrets》
按照常規的思維，我們在新增半透明的邊框時無非是將邊框顏色設定乙個透明度，如下：
1然而顯示的效果並不理想，背景侵入了透明的邊框中。doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>title
title
>
6<
style
>
7.outerbox
13.innerbox
25style
>
26head
>
27<
body
>
28<
div
class
="outerbox"
>
29<
div
class
="innerbox"
>
div>
30div
>
31body
>
32html
>
當然我們可以在背景外層再加一層div，然後將div設定為透明，然後將背景居中也可以達到透明邊框的效果，但是比較繁瑣。
這裡我們可以在innerbox類中新增一條屬性background-clip: padding-box;（這個屬性的初始值是border-box） 表示侵入到padding之外的background將會被截去。實現效果如下：
border屬性並不支援多個邊框的設定，涉及到多重邊框時我們常規的思路要麼是使用多個div層層巢狀，層層居中。要麼是使用背景圖模擬多重邊框。這裡我們以另外兩個角度來實現多重邊框。
box-shadow的相關語法是box-shadow: h-shadow
v-shadow
blur
spread
color inset; 當我們將h-shadow
v-shadow
blur設定為0。再加上正值的拓張半徑spread 。我們就能模擬實線的邊框。
最重要的是，box-shadow支援逗號分隔語法，這意味著我們能加任意數量的投影。我們將之前的邊框去除，加上box-shadow: 0 0 0 5px deeppink, 0 0 0 10px darkred, 0 0 0 15px #4c608b;
這種方法非常便捷，但是需要注意的是。陰影與邊框在布局中的行為並不一致，它不佔據實際的「位置」也無法響應事件。此時我們需要使用外邊距模擬陰影所佔據的位置。或者在box-shadow中加入inset關鍵字改為內建陰影再使用內邊距模擬所佔據的位置，這樣做既是實體布局又可以響應事件。
當我們只需要兩層邊框時可以考慮在border的基礎上加上outline（描邊）。這樣做有乙個優點就是outline的樣式比較靈活，而box-shadow只能模擬實線。與outline-offset配合使用可以控制描邊與邊緣的位置關係。
這裡我們做乙個簡單的縫邊效果：
要注意的是，描邊並沒有圓角屬性，當我們在圓角外描邊的時候，有可能出現無法貼合的情況。此時不要採用這種方式。
半透明邊框
相信大家以前都是用過css的半透明顏色，比如rgba 和hsla 但在一些屬性 比如邊框 中使用半透明顏色並沒有想象中那麼容易。我們接下來會看的 假設我們想給乙個容器設定乙個白色的背景和一道半透明的白色邊框，body的背景會從半透明的邊框透過來。我們最開始的嘗試可能是醬子的 1 test 結果如圖所...
《CSS揭秘》半透明邊框
效果展示 展示 doctype html en utf 8 viewport content width device width,initial scale 1.0 半透明邊框 title body div style head 我有乙個半透明的邊框呦 div body html 預設情況下，背景...
CSS揭秘 半透明邊框
技巧 實現乙個半透明的邊框 預備知識background clip background clip 設定元素背景是否延伸到邊框下面，如果沒有設定背景顏色或者，那麼這個屬性只有在邊框設定為透明或者半透明時才能看到視覺效果。否則這個屬性造成的樣式變化會被元素邊框所覆蓋。預設值為 border box 沒...