在CSS中設(shè)置邊框的方法
在CSS中設(shè)置邊框,可以使用border
屬性,這個(gè)屬性可以設(shè)置一個(gè)元素的邊框樣式、寬度和顏色。
border
屬性有以下幾個(gè)值:
border-style
設(shè)置邊框的樣式,如solid
、dashed
、dotted
等。
border-width
設(shè)置邊框的寬度,可以設(shè)置為具體的像素值,也可以設(shè)置為相對(duì)值,如medium
、thin
、thick
等。
border-color
設(shè)置邊框的顏色,可以設(shè)置為具體的顏色值,也可以設(shè)置為相對(duì)顏色值,如black
、white
、red
等。
除了以上三個(gè)值,border
屬性還可以接受一個(gè)復(fù)合值,即border-width border-style border-color
,這樣可以直接設(shè)置邊框的樣式、寬度和顏色。
要設(shè)置一個(gè)元素的邊框?yàn)?像素寬的實(shí)線,顏色為黑色,可以寫為:
element { border: 2px solid black; }
如果要分別設(shè)置元素的四個(gè)邊的邊框樣式、寬度和顏色,可以使用以下四個(gè)屬性:
border-top
設(shè)置元素頂部的邊框樣式、寬度和顏色。
border-right
設(shè)置元素右側(cè)的邊框樣式、寬度和顏色。
border-bottom
設(shè)置元素底部的邊框樣式、寬度和顏色。
border-left
設(shè)置元素左側(cè)的邊框樣式、寬度和顏色。
每個(gè)屬性都可以接受一個(gè)復(fù)合值,即border-width border-style border-color
,要分別設(shè)置元素頂部和底部的邊框?yàn)?像素寬的實(shí)線,顏色為黑色,可以寫為:
element { border-top: 2px solid black; border-bottom: 2px solid black; }