CSS border(邊框)

CSS 邊框屬性

CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。 可以為上下左右每個框 定制不同的樣式和顏色。

邊框樣式

邊框樣式屬性指定要顯示什么樣的邊界。 border-style屬性用來定義邊框的樣式。

border-style 值:

none: 默認無邊框

 

 

邊框寬度

您可以通過 border-width 屬性為邊框指定寬度。

為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等) ，我一般用px

邊框顏色

border-color屬性用於設置邊框的顏色。可以設置的顏色：

• name - 指定顏色的名稱，如 "red"
• RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
• Hex - 指定16進制值, 如 "#ff0000"

注意： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。

邊框-單獨設置各邊

在CSS中，可以指定不同的側面不同的邊框：

p
{
    border-top-style:dotted;     上
    border-right-style:solid;    右
    border-bottom-style:dotted;  下
    border-left-style:solid;     左
}

 

 注意 也可以簡寫———— border-style屬性可以有1-4個值：

• border-style:dotted solid double dashed;     （寫了4個）
  • 上邊框是 dotted
  • 右邊框是 solid
  • 底邊框是 double
  • 左邊框是 dashed
• border-style:dotted solid double;                   （寫了3個）
  • 上邊框是 dotted
  • 左、右邊框是 solid
  • 底邊框是 double
• border-style:dotted solid;                                （寫了2個）
  • 上、底邊框是 dotted
  • 右、左邊框是 solid
• border-style:dotted;                                         （寫了1個）
  • 四面邊框是 dotted

上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

最后

上面的例子用了很多屬性來設置邊框。

你也可以在一個屬性中設置邊框。

你可以在"border"屬性中設置：

• border-width
• border-style (required)
• border-color

比如：

border:5px solid red;        分別代表：   邊框的寬，樣式，顏色