我想用CSS創建一個簡單的加載動畫，所以我需要一個在元素周圍只有1/4可見的邊框。元素也需要是圓形的。我偶然發現了border-top，并創建了以下CSS，應用于“加載元素”：
然而，現在我遇到了一個問題，用border-top創建的邊界包圍了大約1/2的元素，并且得到了一個奇怪的形狀。
我搜索了一個解決方案，發現我還需要在整個元素周圍添加一個邊框，使它看起來像我想要的那樣。因此，我添加了以下CSS:border: 5px solid transparent，并實現了我想要的結果。邊框占據元素的1/4，并具有線性端點：
為什么我的解決方案有效，為什么我的第一次嘗試將元素包圍了一半，為什么我的第一次嘗試形狀如此奇怪？
CSS邊框以一定角度相交，因此其端點的形狀由每個邊框的寬度決定。這就是如何使用邊框創建CSS三角形。本文很好地概述了它的工作原理，并在開始處提供了一個很好的可視化示例：CSS三角形的秘密
當然，當邊界都是相同的寬度，并且沒有邊界半徑使事情復雜化時，更容易看到發生了什么。但是當你只有一個寬度和邊界半徑的邊界時，你已經看到了它是如何影響匯合點的。
我建議您嘗試創建一個具有4種不同顏色邊框的方形div，然后使用瀏覽器的開發人員工具對每個邊框的寬度和邊框半徑進行實驗，這樣您就可以看到相交點是如何變化的。