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

DIV CSS边框有哪些效果?CSS边框效果有哪些样式?

首先知道边框CSS单词为border,其CSS样式值是复数值,每个值中间使用1个空格间隔。

我们看看CSS border边框样式语法结构:
对一个盒子对象设置边框样式CSS代码

  1. .divcss5{ border:1px solid #F00 } 

css border分析结构图
边框结构分析图

修改边框样式我们可以从3方面进行修改。

一、修改宽度   -   TOP

修改边框宽度值可以实现边框厚度(宽度)效果。

1:当边框宽度设置为1px时DIV+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>DIVCSS5 边框样式</title> 
  6. <style> 
  7. .divcss5{ border:1px solid #F00; width:180px; height:80px } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"></div> 
  12. </body> 
  13. </html> 

效果截图:

边框为1px宽度时候效果
边框为1px宽度时候效果截图

2:当边框宽度设置为5px时DIV+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>DIVCSS5 边框样式</title> 
  6. <style> 
  7. .divcss5{ border:5px solid #F00; width:180px; height:80px } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"></div> 
  12. </body> 
  13. </html> 

案例效果截图

边框为5px时候效果
边框为5px时候效果截图

由以上两个更改边框宽度可以实现改变边框效果样式。

二、修改边框颜色   -   TOP

修改边框颜色也可以改变边框样式效果。

1、设置边框为红色

HTML源代码+CSS代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>DIVCSS5 边框样式</title> 
  6. <style> 
  7. .divcss5{ border:5px solid #F00; width:180px; height:80px } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"></div> 
  12. </body> 
  13. </html> 

边框为红色效果
边框为红色效果截图

2、设置边框为蓝色

HTML源代码CSS代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>DIVCSS5 边框样式</title> 
  6. <style> 
  7. .divcss5{ border:5px solid #00F; width:180px; height:80px } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"></div> 
  12. </body> 
  13. </html> 

效果截图

CSSDIV案例之蓝色边框效果截图
CSS+DIV案例之蓝色边框效果截图

三、修改边框样式   -   TOP

比如实线边框虚线边框

修改CSS样式分析截图
修改CSS样式分析截图

1、样式有哪些
边框样式参数:
none :  无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid :  实线边框
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :  根据border-color的值画菱形边框
inset :  根据border-color的值画3D凹边
outset :  根据border-color的值画3D凸边

2、样式效果截图

边框线条样式截图
边框线条样式截图

3、常用与需要注意如何选择边框
常用共3个属性:
3-1:none :  无边框。
3-2:dashed 虚线
3-3:solid 实体线
其它边框线条样式兼容浏览器不是那么好,所以平时大家选择使用时候注意使用这3个即可。
dashed虚线和solid实体线

以上实例均演示为实现,接下来我们看看虚线边框样式:
虚线边框CSS DIV实例代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>DIVCSS5 边框样式</title> 
  6. <style> 
  7. .divcss5{ border:5px dashed #00F; width:180px; height:80px } 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"></div> 
  12. </body> 
  13. </html> 

效果截图:

DIV CSS虚线边框实例效果截图
DIV CSS虚线边框实例效果截图

总结:改变边框样式可以从边框宽度、边框颜色、边框线条样式改变。

与边框相关CSS教程文章:
1、div加边框border
2、div显示边框
3、html虚线边框
4、css虚线边框
5、css虚线下划线
6、div css边框宽度
7、css去掉img图片边框
8、css设置Html表格边框
9、css边框缩写
10、css边框样式代码合并优化
11、css隐藏超出边框内容
12、CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框
13、div css布局搜索框

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