如何設(shè)置div邊框

這篇文章主要介紹了如何設(shè)置div邊框的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何設(shè)置div邊框文章都會有所收獲，下面我們一起來看看吧。

設(shè)置裝備擺設(shè)div邊框border技倆

對div設(shè)置邊框CSS5給大家引見三種法子。

首先找到邊框CSS單詞：border

一、直接div標簽內(nèi)設(shè)置邊框

1、div邊框?qū)嵗a

<div style=" border:3px solid #F00">設(shè)置裝備擺設(shè)div邊框厚度3px，實線血色邊框</div>

2、成效截圖

3、注明直接對div標簽內(nèi)使用style屬性并直接設(shè)置裝備擺設(shè)css邊框便可。

二、外部CSS對div設(shè)置裝備擺設(shè)邊框

1、CSS代碼

.exp{ border:1px dashed #00F}

2、HTML代碼

<div class="exp">配置div邊框厚度1px，虛線藍色色邊框</div>

3、實例截圖

特別注明這里CSS代碼放HTML頁面內(nèi)，并使用style標簽。若是是放入外部CSS文件，CSS代碼直接放CSS文件內(nèi)，就不需求style標簽。

三、經(jīng)由過程div父級對其設(shè)置裝備擺設(shè)邊框花式

1、實例CSS代碼

.abc div{ border:4px solid #090}

2、HTML代碼

<div>我在DIV內(nèi)然則不有邊框</div>    <div>我在DIV內(nèi)然而父級是class=abc 所以我這個DIV有邊框</div><div class="abc">我誠然是在class=abc內(nèi)，然則我不有在此子級div內(nèi)</div> </div><div class="abc">

3、成就截圖

4、闡明從以上實例，一樣在div內(nèi)，因為div父級不是.abc以是沒有邊框格式。因為class=abc本身不有設(shè)置裝備擺設(shè)CSS邊框，只對class=abc子級div設(shè)置邊框，所以瞥見以上成就。

關(guān)于“如何設(shè)置div邊框”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何設(shè)置div邊框”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。