欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

给DIV加一个边框办法教程,实现div边框技俩。经由过程CSS border花色属性实现加边框。

如下是各种给DIV加不合边框实例与材干教程、html代码。

一、div加四边加边框

1、用到css单词与值


  1. border:1px solid #F00 

设置对象边框为红色边框

2、div完整小实例实例代码:


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

实例截图:

给div 边框

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

二、div上边加边框

1、使用单词和值


  1. border-top:1px solid #F00 

2、残缺实例代码


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

3、效果截图

div 边框-上边框

三、div下边加边框

1、应用单词与值


  1. border-bottom:1px solid #000 

2、完整实例代码


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

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

div 下边框-底部边框

四、div左边加边框

1、应用单词与值


  1. border-left:1px solid #000 

2、完整源代码


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

3、截图

左边框

五、div右侧加边框

1、DIV的左边框应用单词和值


  1. border-right:1px dashed #F00 

2、代码


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

对DIV设置血色虚线边框

3、截图

右 div 边框

六、div三边加边框 手法

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

2、完整HTML源代码


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

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

3、截图

设置DIV 三边

4、表白需要把稳,先配置4边CSS,再后头设置装备摆设去掉边框花样,这样阅读器端,从左往右读取时辰,能衬着先4边,后缺一边的结构功效。独霸了客户端读庖代码从左往右读取的能力。

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

在上面实例代码教程中,能够看到border的值中其中一个单词为solid,即设置边框名堂为实体线。

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


  1. border:1px dashed #000 

设置装备摆设边框1px虚线彩色边框(#000 黑色彩值,实际组织中正确色调值遵照希图图经由PS拾色东西失掉)

即:

border:1px dashed #000 —— 虚线1px厚度宽度玄色边框 border:1px solid #000 ——实线1px厚度宽度玄色边框

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c52052.shtml