在HTML前端斥地中，有數次會對

配置邊框。

這里

給DIV加一個邊框方式教程，實現div邊框款式。經由CSS border花樣屬性實現加邊框。

如下是各類給DIV加分歧邊框實例與才具教程、html代碼。

一、div加四邊加邊框

1、用到css單詞與值

border:1px?solid?#F00

設置對象邊框為紅色邊框

2、div殘破小實例實例代碼：

html>

www.CSS5.com.cn

.a-4{?border:1px?solid?#F00}

四邊為血色

實例截圖：

經由border輕松設置div 4條邊邊框

二、div上邊加邊框

1、運用單詞和值

border-top:1px?solid?#F00

2、完整實例代碼

html>

www.CSS5.com.cn

.a-top{?border-top:1px?solid?#F00}

只配置div上邊框

3、成效截圖

三、div下邊加邊框

1、應用單詞和值

border-bottom:1px?solid?#000

2、殘破實例代碼

html>

www.CSS5.com.cn

.a-bottom{?border-bottom:1px?solid?#000}

只設置div下邊框

3、截圖設置DIV玄色的下邊框

四、div左邊加邊框

1、應用單詞與值

border-left:1px?solid?#000

2、殘破源代碼

html>

www.CSS5.com.cn

.a-left{?border-left:1px?solid?#000}

只設置div?左邊框

3、截圖

五、div右邊加邊框

1、DIV的右側框運用單詞與值

border-right:1px?dashed?#F00

2、代碼

html>

www.CSS5.com.cn

.a-right{border-right:3px?dashed?#F00}

只配置div右側邊框

對DIV設置紅色虛線邊框

3、截圖

六、div三邊加邊框 身手

1、技能花樣先設置border值，即設置對象4邊均有邊框，那條div邊不需要設置裝備擺設邊框，就對其再配置邊框為0的值。

2、殘缺HTML源代碼

html>

www.CSS5.com.cn

.a-san{border:3px?solid?#F00;?border-bottom:0}

三邊有邊框，其它一邊沒有邊框

配置下邊框沒有邊框，其它三邊設置邊框。——下邊框不設置裝備擺設邊框。

3、截圖

4、告白須要留意，先配置4邊CSS，再后背設置裝備擺設去掉邊框技倆，這樣涉獵器端，從左往右讀取時候，能渲染先4邊，后缺一邊的結構功效。操作了客戶端讀接替碼從左往右讀取的才具。

七、div 虛線邊框和實線邊框

在下面實例代碼教程中，概略看到border的值中其中一個單詞為solid，即設置邊框格式為實體線。

常用的兼容各大瀏覽器的虛線為dashed 即實例代碼：

border:1px?dashed?#000

設置邊框1px虛線黑色邊框(#000 黑色采值，現實機關中精確色彩值依據貪圖圖經由PS拾色器械取得)

即：

border:1px dashed #000 —— 虛線1px厚度寬度彩色邊框 border:1px solid #000 ——實線1px厚度寬度彩色邊框

總結

以上是生活随笔為你收集整理的html div 边框只显示右侧,div 边框原来有这么多种设置方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。