簡解Css - 多變的邊框

1. 甜嘴棒棒糖

實現只需要藉助box-shadow兩個特性:

box-shadow可任意個數陰影
box-shadow的擴張半徑引數。

body {
    background: #000;
}

.pin {
    margin: 60px auto;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: white;
    box-shadow: 0 0 0 10px hsl(0, 100%, 50%),
    0 0 0 20px hsl(100, 100%, 50%),
    0 0 0 30px hsl(200, 100%, 50%);
}
複製程式碼

如果只用來當作圖片顯示，那麼再加上適當的外邊距，顯然已經大功告成了。

解決響應問題:

但其實會有一個潛在的問題。因為用box-shadow生成的邊框是出現在元素外圈的，而元素的外圈，是不會響應滑鼠事件的。

可以通過把每個box-shadow屬性加入inset關鍵詞，讓它在元素內部渲染，然後使用同等的內邊距來解決。

程式碼如下:

body {
    background: #000;
}

.pin {
    margin: 60px auto;
    border-radius: 60px;
    width: 60px;
    height: 60px;
    padding: 30px;
    background: white;
    box-shadow: 0 0 0 10px hsl(0, 100%, 50%) inset,
    0 0 0 20px hsl(100, 100%, 50%) inset,
    0 0 0 30px hsl(200, 100%, 50%) inset;
}
複製程式碼

2. 兩層邊框

2.1 小試牛刀

只需要兩層邊框的話，亦可以使用outline(描邊)。

但它有個缺陷，由於outline不屬於元素的內部空間，所以當使用border-radius時，是無法被渲染成充斥曲線美的弧形的。

不過好訊息是，這被Css工作組認為是個bug，有望未來被修正。

示例程式碼如下:

.pin {
         margin: 60px auto;
         width: 60px;
         height: 60px;
         background: white;
         border: 10px solid plum;
         outline: 10px solid dodgerblue;
         outline-offset: -20px;
     }
複製程式碼

2.2 縫邊效果

outline別於box-shadow的一點在於它不僅生成實線邊框，還可以生成虛線邊框。

同時通過outline-offset可以來控制它的位置，還可以是負值哦。

利用這兩點，一個簡約而實用的縫邊效果輕鬆誕生。

如下:

.pin {
   margin: 60px auto;
   width: 200px;
   height: 100px;
   outline: 2px #fff dashed;
   outline-offset: -10px;
   background: hsl(20, 80%, 20%);
  }
複製程式碼

最後留個想象題，由於是虛線，所以你把outline設定更寬，或者outline-offset設定更大，那麼會產生什麼效果呢?

3. 邊框內圓角

我們瞭解到box-shadow可以是圓角的，但是outline至少現在是不能的。

結合這兩點特性，可以實現邊框內圓角。