css中的有趣的 border

css 中的 border 屬性，我想凡是了解一點 css 的都知道它是作用，可以在 mdn 上找到對它的詳細介紹。

簡單來說，就是我們常用的邊框，乙個非常基礎的用法，就是

border: 1px solid black;
// 等價於
border-width: 1px;
border-style: solid;
border-color: black;

下面是演示的效果：

當然還可以定義很多奇形怪狀的邊框型別，比如圓角(radius，可能相容性不是很好)，橢圓(其實只要懂了橢圓，邊框就可以隨意繪製了)。

看了這麼多有意思的 demo，那麼對於邊框，你真的了解了嗎？最近碰到乙個有意思的 css 樣式，讓我對於邊框有了很深刻的了解。平時我們用邊框，基本都要給邊框乙個寬度，1px，偶爾2px，並沒有發現邊框與元素之間的關係，當我們把border-width換大一點的值，問題就來了。

並且，邊框是可以單獨設定 top，right，bottom，left 的值：

border: 20px solid gray;
border-top-width: 40px;
border-left-width: 40px;

邊框與邊框的交界處該如何來判斷呢？了解這一點非常重要，如果你也發現了這個問題，那麼下面有意思的東西就來了：

居然是內頂點與外頂點的連線把邊框分開了，如果把元素的width和height都設定成 0，再加乙個 radius：

width: 0;
height: 0;
border-radius: 50%;

前面border-radius的原理你也應該懂了吧!

有關於 border-radius 的選取，可以看下 sf 上的這個提問 border-radius內外半徑=《邊框寬度時，盒子內邊就成了直角怎麼一回事。

知道了一些 border 的基本知識，我們就可以實現常見於對話方塊的箭頭，像下面這種：

這個需要借助於 css 中的透明transparent來實現，比如我們需要乙個向右的箭頭，參考上面 width 和 height 為 0 時的例子，對應的邊框大小15px,0px,15px,30px，先看下面這個例子

border-width: 15px 0px 15px 30px;
border-color: black gray;
border-style: solid;

這個時候需要把 border-top 和 border-bottom 的顏色設定成透明，

border-color: transparent gray;

那麼，對於的其他三個角度的箭頭也可以以同樣的方式設計出來：

css refreshers: borders

歡迎來我的部落格交流。