詳解css樣式之border屬性

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程式碼

<p></p>

<p></p>

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中文網其他相關文章！