div加边框样式-div设置边框

网页前端开发中对div元素设置样式比较常见，比如对div加边框样式也是常用布局。

对html中div设置七种情况下边框样式的实例代码总结如下：

一、div四边都设置边框

CSS代码：

.sibian{ border:1px solid #F00}

设置边框（四条边）1像素宽度红色边框。

DIV应用：

<div class=”sibian”>设置四条边框相同的红色边框</div>

二、div上边设置边框

CSS代码

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

border-top单独设置上边框样式

div应用：

<div class="shangbian">设置了上边框</div>

三、div下边设置边框

CSS代码

.xiabian{ border-bottom:1px solid #F00}

border-bottom单独设置下边框样式

div应用：

<div class="xiabian">设置了下边框</div>

四、div左边设置边框

CSS代码

.zuobian{ border-left:1px solid #F00}

border-left单独设置左边的边框样式

div应用：

<div class="zuobian">设置了对象左边框</div>

五、div右边设置边框

CSS代码

.youbian{ border-right:1px dashed #F00}

border-right单独设置右边框样式：1像素虚线红色边框

div应用：

<div class="youbian">设置了右边的边框为虚线红色边框</div>

六、div三条边设置边框

CSS代码

.sanbian{ border:1px solid #F00;border-left:0}

三边设置技巧，先设置对象四边的边框，哪条边不设置边框就再单独设置对应边框为0，这样即可实现用少的代码设置三条边框样式。需要注意设置边框为零（不设置边框）的，放在后面。

div应用：

<div class="sanbian">设置了上、下、右的三条边的边框样式</div>

技巧性以最少代码设置三条边的边框样式。

七、div两条边设置边框样式

css设置边框代码：

.tbian{ border-bottom:1px dashed #F00;border-right:1px dashed #F00;}

分别设置右边和下边边框样式。

div应用

<div class="tbian">对div设置了两条边框</div>

div设置边框样式的总结：
以上对div常见7种情况下边框样式的设置，通常直接设置，也有技巧性设置，通过平时多实践即可轻松掌握对div设置单边、多边的实现或虚线、不同颜色的边框样式。