您的位置:CSS主页 > CSS基础 >

DIV CSS border边框教程

 

DIV+CSS边框border知识教程篇

div css边框目录
  1. border边框语法
  2. 单边CSS边框
  3. 常用推荐边框样式
  4. css border边框用处
  5. border边框图文教程
  6. css边框应用案例代码
  7. css border边框案例截图
  8. border总结
  9. 在线演示

1、CSS border边框语法   -   TOP

border-left设置左边框
border-right设置右边框
border-top设置上边框
border-bottom设置下边框

#thinkcss{border:1px solid #00F}
设置了thinkcss对象盒子1px像素蓝色实线边框

通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。

边框颜色:
根据需要设置具体颜色值定

边框厚度(宽度):
使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。

border边框样式:
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凸边

边框样式截图:

CSS边框样式效果演示图
border边框样式效果样式演示图

2、CSS单独设置左、右、上、下边框   -   TOP

以缩写方式写上、下、左、右边框单独CSS样式设置方法
1px黑色虚线上边框
border-top:1px dashed #000

1px黑色实线下边框
border-bottom:1px solid #000

1px黑色虚线左边框
border-left:1px dashed #000

1px黑色实线右边框
border-right:1px solid #000

3、常用推荐边框样式   -   TOP

我们通常使用主流浏览器兼容边框样式有:
实线边框:solid
Border:1px solid #000 设置对象1px(像素)宽厚的黑色实线边框。

虚线边框:dashed
Border:1px dashed #000 设置对象1px(像素)宽厚的黑色虚线边框。

4、css border边框用处   -   TOP

设置对象边框样式,设置单独上、下、左、右边框样式,实现美化美观。边框起到分割、规划布局作用。

5、border边框图文教程   -   TOP

border边框CSS样式缩写说明教程图
边框说明教程图常用CSS边框样式缩写图例

6、css边框应用案例代码   -   TOP

描述:为了观察案例效果我们设置一个宽为200px,高度1px,红色实线边框的DIV盒子
CSS代码:
#thinkcss{height:100px;width:200px;border:1px solid #F00}

HTML代码对应片段:
<div id="thinkcss">我的高度为100px,宽度为200px</div>

7、css border边框案例截图   -   TOP

div+css边框使用案例图
边框使用案例截图 

8、css边框border总结   -   TOP

我们使用DIV CSS设置边框border样式,一般我们使用简写表达式进行设置对象边框border样式,这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框,我们都尽量缩写方式简写CSS边框代码。

9、在线演示   -   TOP

http://www.thinkcss.com/yanshi/css_border.html

标签(Tag): border 边框 边框样式

更多

上一页: 上一篇:CSS letter-spacing文字间距离
下一页: 下一篇:CSS font-family字体样式属性教程

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-08-17     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/c62.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息