CSS中的邊界指的是元素的邊框或者元素內部的留白。在CSS中,我們可以通過設置邊界的大小、樣式和顏色來改變元素的外觀。
邊界的大小可以通過
border-width屬性來設置,這個屬性可以設置為一個具體的像素值或者是一個相對值,比如百分比。
.example { border-width: 2px; }
如果你想要設置四個邊框的大小,可以使用
border-top-width,
border-right-width,
border-bottom-width和
border-left-width屬性,分別對應元素的上下左右四條邊。
.example { border-top-width: 2px; border-right-width: 3px; border-bottom-width: 2px; border-left-width: 3px; }
邊界的樣式可以通過
border-style屬性來設置,這個屬性可以取值為
solid,
dashed,
dotted等等,具體可以參考 CSS 文檔。
.example { border-style: solid; }
邊界的顏色可以通過
border-color屬性來設置,和文字顏色一樣,顏色可以使用具體的顏色值,也可以使用顏色名稱。
.example { border-color: #ccc; }
另外,還有一些邊界的縮寫屬性,比如
border,
border-top,
border-right,
border-bottom和
border-left,可以同時設置邊界的大小、樣式和顏色。
.example { border: 2px solid #ccc; }
除了邊框之外,元素內部的留白也是一種邊界,可以使用
padding屬性來設置。和邊框一樣,
padding屬性也有上下左右四個縮寫屬性。
.example { padding: 10px; }
需要注意的是,邊框和內邊距都會占用元素的寬度和高度,不同的瀏覽器可能會有不同的盒模型,需要注意計算元素的實際大小。