CSS手册CSS3手册Edu人民币大写转换网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > CSS入门 >

css border-top div css上边框样式设置

css border-top css 上边框样式设置

css上边框样式border-top属性,设置对象上边框样式,其用法与border边框属性完全相同,只是他只设置上边框一条边样式。

一、css border-top语法   -   TOP

  1. div{ border-top:2px solid #F00} 

设置div对象上边框为2px实线红色边框。

border-top:2px solid #F00解析
这里是上边框代码缩写简化写法
2px 设置边框宽度;
solid 设置边框样式-这里是实线
#F00 设置边框颜色这里是红色

其用法语法完全与border边框相同。

如果只设置一条上边框样式推荐只使用border-top来设置。

二、border-top上边框CSS实例   -   TOP

1、上边框border-top实例代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>css上边框实例 ThinkCSS</title> 
  6. <style> 
  7. .exp1{ border-top:1px solid #F00} 
  8. .exp2{ border-top:2px dashed #00F} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <div class="exp1">1px的红色实线上边框<br /> 
  13. 测试内容测试内容<br /><br /> 
  14. </div> 
  15. <div class="exp2">2px的蓝色虚线上边框</div> 
  16. </body> 
  17. </html> 

2、上边框效果截图


css 上边框 border-top实例效果截图

三、border-top上边框样式总结   -   TOP

一般设置上边框或任何一边的边框使用单独的边框样式即可,比如上边框我们使用border-top即可。

关于边框扩展文章教程:
1、css border-bottom下边框
2、css border-right右边框
3、css边框颜色设置
4、css边框大小
5、css虚线下划线
6、css下划线与字间距
7、css下划线颜色设置

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

CSS教程文章修订日期:2016-07-27 14:48 www.thinkcss.com div css。

我要分享到:

相关文章 Related articles