首页 / 知识

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

2023-04-11 15:31:00

在HTML前端开发中，有数次会对<div>配置边框。

这里

给DIV加一个边框方式教程，实现div边框花色。通过CSS border花式属性完成加边框。

下列是各类给DIV加差距边框实例和技能花样教程、html代码。

一、div加四边加边框

1、用到css单词与值



    
	
  1. 
		border:1px solid #F00 
    2. 




	设置对象边框为血色边框



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




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-4{ border:1px solid #F00} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-4">四边为血色</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




	实例截图：



	给div 边框



	经过border轻松设置装备摆设div 4条边边框



	二、div上边加边框



	1、应用单词和值




    
	
  1. 
		border-top:1px solid #F00 
    2. 




	2、完整实例代码




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-top{ border-top:1px solid #F00} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-top">只配置div上边框</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




	3、成就截图



	div 边框-上边框



	三、div下边加边框



	1、使用单词与值




    
	
  1. 
		border-bottom:1px solid #000 
    2. 




	2、残缺实例代码




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-bottom{ border-bottom:1px solid #000} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-bottom">只设置div下边框</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




	3、截图 配置DIV彩色的下边框



	div 下边框-底部边框



	四、div左边加边框



	1、应用单词与值




    
	
  1. 
		border-left:1px solid #000 
    2. 




	2、完整源代码




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-left{ border-left:1px solid #000} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-left">只设置装备摆设div 左边框</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




	3、截图



	左边框



	五、div右侧加边框



	1、DIV的右边框使用单词和值




    
	
  1. 
		border-right:1px dashed #F00 
    2. 




	2、代码




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-right{border-right:3px dashed #F00} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-right">只配置div左侧边框</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




	对DIV设置装备摆设红色虚线边框



	3、截图



	右 div 边框



	六、div三边加边框 本领



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



	2、完整HTML源代码




    
	
  1. 
		<!DOCTYPE html>
    2. 
	
  2. 
		<html>
    3. 
	
  3. 
		<head>
    4. 
	
  4. 
		<meta charset="utf-8" />
    5. 
	
  5. 
		<title>www.CSS5.com.cn</title>
    6. 
	
  6. 
		<style>
    7. 
	
  7. 
		.a-san{border:3px solid #F00; border-bottom:0} 
    8. 
	
  8. 
		</style>
    9. 
	
  9. 
		</head>
    10. 
	
  10. 
		<body>
    11. 
	
  11. 
		<div class="a-san">三边有边框，其他一边没有边框</div>
    12. 
	
  12. 
		</body>
    13. 
	
  13. 
		</html>
    14. 




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



	3、截图



	设置DIV 三边



	4、抒发 需要把稳，先设置4边CSS，再前面设置装备摆设去掉边框花样，多么浏览器端，从左往右读取时候，能衬着先4边，后缺一边的机关造诣。操作了客户端读庖代码从左往右读取的手法。



	七、div 虚线边框和实线边框



	在下面实例代码教程中，大要看到border的值中个中一个单词为solid，即设置边框花样为实体线。



	常用的兼容各大浏览器的虚线为dashed 即实例代码：




    
	
  1. 
		border:1px dashed #000 
    2. 




	配置边框1px虚线彩色边框（#000 黑色彩值，现实结构中切确颜色值依照整治图经由PS拾色器械获取）


     		




边框设置方法教程配置差距









最新内容




    










相关内容











热门文章






推荐文章






标签云


    







猜你喜欢