首頁  >  文章  >  web前端  >  分享div加上邊框樣式的範例程式碼

分享div加上邊框樣式的範例程式碼

黄舟
黄舟原創
2017-07-19 11:18:555520瀏覽

如何為div加上邊框樣式?

對div盒子加上邊框樣式很簡單只需要使用border板塊樣式即可。

一、虛線與實線邊框  -   TOP

邊框虛線樣式:dashed
邊框實作樣式:solid

border:1px dashed #000

#代表設定物件邊框寬度為1px黑色虛線邊框

border:1px solid #000


代表設定物件邊框寬度為1px黑色實作邊框

二、對div上邊加上邊框  -   TOP

我們給div上邊加1px黑色邊框

div{border-top:1px solid #000}

三、給div底部加邊框  -   TOP

給div盒子底部加2px虛線紅色邊框

div{border-bottom:2px dashed #F00}

四、在div盒左側加邊框  -   TOP

給一個css選擇器 css命名為「.divcss5」盒子左側加上一個藍色1px實線邊框

.divcss5{ border-left:1px solid #00F}

DIV程式碼:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>

五、在盒子div右側加上邊框  -   TOP

div物件右側加1px紅色實線邊框

div{ border-right:1px solid #F00}

六、在盒子上下加邊框  -   TOP

#給盒子上下加1px實現黑色邊框

div{border-top:1px solid #000;border-bottom:1px solid #000}

七、給div盒子左右加邊框  -   TOP

給盒子左右加2px虛線綠色邊框

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}

八、給div四邊加上一個邊框  -   TOP

給一個DIV四邊加上3px實現黑色邊框

div{ border:3px solid #000}

以上是分享div加上邊框樣式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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