div 边框原来有这么多种设置办法

2019-09-07 郑州网站建设  

在HTML前端斥地中,有数次会对<div>配置边框。

这里

给DIV加一个边框方式教程,实现div边框款式。经由CSS border花样属性实现加边框。

如下是各类给DIV加分歧边框实例与才具教程、html代码。

一、div加四边加边框

1、用到css单词与值

border:1px solid #F00 

设置对象边框为红色边框

2、div残破小实例实例代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-4">四边为血色</div> 

</body> 

</html> 

实例截图:

给div 边框

经由border轻松设置div 4条边边框

二、div上边加边框

1、运用单词和值

border-top:1px solid #F00 

2、完整实例代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-top">只配置div上边框</div> 

</body> 

</html> 

3、成效截图

div 边框-上边框

三、div下边加边框

1、应用单词和值

border-bottom:1px solid #000 

2、残破实例代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-bottom">只设置div下边框</div> 

</body> 

</html> 

3、截图设置DIV玄色的下边框

div 下边框-底部边框

四、div左边加边框

1、应用单词与值

border-left:1px solid #000 

2、残破源代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-left">只设置div 左边框</div> 

</body> 

</html> 

3、截图

左边框

五、div右边加边框

1、DIV的右侧框运用单词与值

border-right:1px dashed #F00 

2、代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-right">只配置div右侧边框</div> 

</body> 

</html> 

对DIV设置红色虚线边框

3、截图

右 div 边框

六、div三边加边框 身手

1、技能花样先设置border值,即设置对象4边均有边框,那条div边不需要设置装备摆设边框,就对其再配置边框为0的值。

2、残缺HTML源代码

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title></title> 

<style> 

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

</style> 

</head> 

<body> 

<div class="a-san">三边有边框,其它一边没有边框</div> 

</body> 

</html> 

配置下边框没有边框,其它三边设置边框。——下边框不设置装备摆设边框。

3、截图

设置DIV 三边


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1046.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • 设置
  • DIV
  • 边框
  • 方法
  • 原来
  • 这么
  • 多种