首頁  >  文章  >  web前端  >  詳解css樣式之border屬性

詳解css樣式之border屬性

高洛峰
高洛峰原創
2017-03-15 10:42:372828瀏覽

border用法詳解:

1、border-width 屬性設定邊框的寬度

    可能的值:像素

2、border-style 屬性設定邊框的樣式

    可能的值:solid(直線),dashed(虛線),dotted(點線)

2、border-color 屬性設定邊框的顏色

    可能的值:red,#f00,#ff0000,rgb(255,0,0),transparent

border-left 屬性設定左邊框

border-right 屬性設定右邊框

border-top 屬性設定上邊框

border-bottom 屬性設定下邊框

擴充延伸

html程式碼

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

css程式碼

 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

結果

css程式碼

 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

結果

css程式碼

 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

結果

 

css程式碼

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}

結果

 

#css程式碼

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

結果

 

css程式碼

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}

結果

 

#######################################

以上是詳解css樣式之border屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn