html div 边框只显示右侧,div 边框原来有这么多种设置方法

在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厚度宽度彩色边框