您的位置:CSS5 > CSS笔记 >

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

发布日期:2020-01-01 20:43:10 来源:WWW.CSS5.COM.CN

网页前端开发中对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设置单边、多边的实现或虚线、不同颜色的边框样式。

标签(Tag): div 边框 div边框
本文分享URL地址:https://www.css5.com.cn/biji/1605.shtml

作者:CSS5原创

上一页:上一篇:页面为什么要br布局_什么地方用br布局
下一页:下一篇:HTML字体加粗-用CSS和两html粗体标签加粗方法