試一試
border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgb(211 220 50 / 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: darkmagenta;
padding: 0.75em;
width: 80%;
height: 100px;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #ff3333;
/* width | style | color */
border: medium dashed green;
/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;
border 屬性可以用下面列出的一個、兩個或三個值來指定。值的順序無關緊要。
備註： 如果未定義邊框樣式，邊框將不可見。這是因為樣式的預設值為 none。
值
<line-width>-
設定邊框的粗細。如果省略，則預設為
medium。見border-width。 <line-style>-
設定邊框的樣式。如果省略，則預設為
none。見border-style。 <color>-
設定邊框的顏色。如果省略，則預設為
currentColor。見border-color。
描述
與所有簡寫屬性一樣，任何被省略的子值都將被設定為其初始值。重要的是，border 不能用於為 border-image 指定自定義值，而是會將其設定為其初始值，即 none。
當你希望所有四個邊框都相同時，border 簡寫屬性特別有用。但是，要使它們彼此不同，你可以使用普通（longhand）屬性 border-width、border-style 和 border-color，它們接受每一邊的不同值。或者，你可以使用物理（例如 border-top）和邏輯（例如 border-block-start）邊框屬性一次只針對一個邊框。
邊框與輪廓
邊框和輪廓非常相似。然而，輪廓在以下方面與邊框不同：
- 輪廓從不佔用空間，因為它們繪製在元素內容之外。
- 根據規範，輪廓不一定是矩形的，儘管它們通常是。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter。 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
border =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
示例
設定一個粉色的浮雕邊框
HTML
html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
CSS
css
div {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
border-radius: 12px;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |
瀏覽器相容性
載入中…