16191源码商城

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

  • 时间:2020-04-03 15:39 作者:DIVCSS5 来源:DIVCSS5 阅读:179
  • 扫一扫,手机访问
摘要:在HTML前端斥地中,有数次会对<div>配置边框。这里给DIV加一个边框方式教程,实现div边框款式。经由CSS border花样属性实现加边框。如下是各类给DIV加分歧边框实例与才具教程、html代码。一、div加四边加边框1、用到css单词与值bor

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

这里

给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/css-jiaocheng/tc51925.shtml


  • 全部评论(0)
最新发布的资讯信息
【新闻资讯|】自动洗地机、自动扫地机供应商-常州首威清洁设备有限公司主营业务(2020-07-22 12:33)
【特效代码|其他信息】防SQL注入代码(ASP版)(2020-07-14 16:30)
【新闻资讯|】丹阳民安消防职业培训学校 www.dymaxfpx.com(2020-05-28 09:33)
【建站开发|经验心得】金币暗堡详细搭建视频教程(2020-05-11 08:33)
【新闻资讯|】常州小程序开发,常州智能小程序开发,常州微信小程序开发选布谷鸟网络(2020-05-09 09:23)
【建站开发|经验心得】如何给div加一个边框border样式(2020-04-03 15:41)
【建站开发|经验心得】div 边框原来有这么多种设置方法(2020-04-03 15:39)
【特效代码|其他信息】Winkawaks游戏按键设置与使用(2020-04-01 17:44)
【新闻资讯|本网专稿】源码商城给您解读百度细雨算法2.0(2020-03-21 23:50)
【特效代码|其他信息】常州供应链在常州找哪家?(2020-03-20 15:56)
网站首页  |   关于我们  |   广告合作  |   联系我们  |   隐私条款  |   免责声明
CopyRight 2014-2024 16191源码商城 |
联系客服
开店申请 在线客服 投诉受理 联系客服
13270945888
手机版

扫一扫进手机版
返回顶部
源码论坛