CSS Border Code in HTML

在 HTML 中使用 CSS 顯示邊框來設置元素邊界非常常見。CSS Border 代碼提供了多種方法來實現這個目的。

一、border 屬性

border 屬性用於設置元素邊框的樣式、寬度和顏色。以下是其基本語法：

border: border-width border-style border-color;

其中，border-width、border-style 和 border-color 參數可選。如果省略其中的某個參數，則系統將使用默認值。

示例：

div {
  border: 2px solid red;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為紅色，寬度為 2 像素，並且邊框的樣式為實線。

二、邊框樣式

CSS Border 代碼通過 border-style 屬性提供了多種不同的邊框樣式。以下是常見的邊框樣式：

• solid：實線
• dotted：點線
• dashed：虛線
• double：雙線
• groove：凹槽線
• ridge：凸槽線
• inset：嵌入線
• outset：突出線

示例：

div {
  border: 2px dotted blue;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為藍色的點線，寬度為 2 像素。

三、邊框寬度

CSS Border 代碼通過 border-width 屬性提供了多種不同的邊框寬度。以下是常見的邊框寬度：

• thin：細線
• medium：中等線
• thick：粗線
• 像素值

示例：

div {
  border: medium solid #000000;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為黑色的中等寬度實線。

四、邊框顏色

CSS Border 代碼支持十六進制顏色值、RGB 顏色值、顏色名稱等多種方式來指定邊框顏色。以下是示例：

div {
  border: 2px solid #FF0000;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為紅色的 2 像素實線。

五、圓角邊框

CSS Border 代碼通過 border-radius 屬性實現圓角邊框效果，該屬性為一個長度值，用於指定邊角的半徑大小。

示例：

div {
  border: 2px solid #000000;
  border-radius: 10px;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為黑色的 2 像素實線，並設置圓角邊框的半徑為 10 像素。

六、邊框陰影

CSS Border 代碼可以通過 box-shadow 屬性實現邊框陰影效果。該屬性支持多個參數，包括陰影的水平偏移量、垂直偏移量、模糊半徑、陰影顏色和陰影的擴展半徑。

示例：

div {
  border: 2px solid #000000;
  box-shadow: 5px 5px 2px #888888;
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為黑色的 2 像素實線，並添加一層 5 像素水平偏移、5 像素垂直偏移和 2 像素模糊半徑的灰色陰影。

七、透明邊框

CSS Border 代碼可以通過透明度屬性實現透明邊框效果，該屬性叫做 CSS3 RGBA（Red Green Blue Alpha）。RGBA 的最後一個參數是透明度，取值範圍為 0（完全透明）到 1（完全不透明）。

示例：

div {
  border: 2px solid rgba(0, 0, 0, 0.5);
}

這個 CSS 代碼片段會將一個 <div> 元素的邊框設置為黑色的 2 像素實線，並設置邊框的透明度為 50%。

八、結語

CSS Border 代碼提供了多種方法來設置 HTML 元素的邊框樣式、寬度和顏色等屬性。掌握這些技巧，可以幫助您創建更具吸引力和視覺效果的網頁。