在 CSS 中,您可以使用border
屬性為 HTML 元素新增邊框。 border
屬性可以設定不同的值來控制邊框的樣式、寬度和顏色。以下是如何使用border
屬性的基本概述:
CSS /* Set border style, width, and color */
.element {
border: 2px solid #333; /* 2px width, solid style, #333 color */
}
在上面的範例中, border
屬性設定了三個值:
邊框寬度:指定邊框的寬度。您可以使用1px
、 2px
、 3px
等值,也可以使用thin
、 medium
或thick
等關鍵字。
邊框樣式:指定邊框的樣式,如solid
、 dashed
、 dotted
、 double
等。
邊框顏色:指定邊框的顏色。您可以使用顏色名稱、十六進位代碼 ( #333
)、RGB 值 ( rgb(51, 51, 51)
) 或其他顏色表示。
這是一個更詳細的範例:
CSS /* Set different border properties individually */
.element {
border-width: 2px; /* Width of the border */
border-style: dashed; /* Style of the border (dashed) */
border-color: #ff0000; /* Color of the border (red) */
}
您也可以將border
屬性與上面所示的普通屬性或速記屬性一起使用來一次設定所有邊框屬性:
CSS /* Shorthand for setting all border properties */
.element {
border: 2px dashed #ff0000; /* Width, style, and color in one line */
}
您可以根據您的設計偏好隨意調整這些值。