在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>www.CSS5.com.cn</title>
- <style>
- .a-4{ border:1px solid #F00}
- </style>
- </head>
- <body>
- <div class="a-4">四边为血色</div>
- </body>
- </html>
实例截图:
经由border轻松设置div 4条边边框
二、div上边加边框
1、运用单词和值
- border-top:1px solid #F00
2、完整实例代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>www.CSS5.com.cn</title>
- <style>
- .a-top{ border-top:1px solid #F00}
- </style>
- </head>
- <body>
- <div class="a-top">只配置div上边框</div>
- </body>
- </html>
3、成效截图
三、div下边加边框
1、应用单词和值
- border-bottom:1px solid #000
2、残破实例代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>www.CSS5.com.cn</title>
- <style>
- .a-bottom{ border-bottom:1px solid #000}
- </style>
- </head>
- <body>
- <div class="a-bottom">只设置div下边框</div>
- </body>
- </html>
3、截图设置DIV玄色的下边框
四、div左边加边框
1、应用单词与值
- border-left:1px solid #000
2、残破源代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>www.CSS5.com.cn</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>www.CSS5.com.cn</title>
- <style>
- .a-right{border-right:3px dashed #F00}
- </style>
- </head>
- <body>
- <div class="a-right">只配置div右侧边框</div>
- </body>
- </html>
对DIV设置红色虚线边框
3、截图
六、div三边加边框 身手
1、技能花样先设置border值,即设置对象4边均有边框,那条div边不需要设置装备摆设边框,就对其再配置边框为0的值。
2、残缺HTML源代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>www.CSS5.com.cn</title>
- <style>
- .a-san{border:3px solid #F00; border-bottom:0}
- </style>
- </head>
- <body>
- <div class="a-san">三边有边框,其它一边没有边框</div>
- </body>
- </html>
配置下边框没有边框,其它三边设置边框。——下边框不设置装备摆设边框。
3、截图
4、告白须要留意,先配置4边CSS,再后背设置装备摆设去掉边框技俩,这样涉猎器端,从左往右读取时候,能渲染先4边,后缺一边的结构功效。操作了客户端读接替码从左往右读取的才具。
七、div 虚线边框和实线边框
在下面实例代码教程中,概略看到border的值中其中一个单词为solid,即设置边框格式为实体线。
常用的兼容各大浏览器的虚线为dashed 即实例代码:
- 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