首頁 > web前端 > css教學 > 詳解css樣式之border屬性

詳解css樣式之border屬性

高洛峰
發布: 2017-03-15 10:42:37
原創
2833 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板