H I O X INDIA
免费的CSS教程
 首页   ||  教程  ||  脚本  ||  图片  || 支持 english Español Français Deutsch Portuguese Japanese தமிழ்

的CSS话题
导言
类型
背景属性
文本属性
字体属性
盒子属性
边界属性
保证金属性
填充属性
专题
请询问您的疑问
反馈


在此页面反馈



名字:
邮件
反馈:
  




CSS层叠样式表边框


主题

如何只在文本的左边和右边设置边框?
在用户指定的边上设置边框?
如何在不同的边上设置不同的边框?



解释

属性: Side Borders

使用以下的标记可对每个边框单独设置。方法:
border-top: <border-top-width> || <border-style> || <border-color> ;
border-left: <border-left-width> || <border-style> || <border-color> ;
border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;
border-right: <border-right-width> || <border-style> || <border-color> ;

定义:
使用这些标记可对每个边框单独设置。边框属性可以取以下的值。
a)border-top:5px dotted red-顶边框可以使用标记border-top来设置。属性值的次序是:顶边框宽度、样式、颜色。
b)border-left:5pt dashed green-左边框可以使用标记border-left来设置。属性值的次序是:左边框宽度、样式、颜色。
c)border-bottom:2% groove grey-底边框可以使用标记border-bottom来设置。属性值的次序是:底边框宽度、样式、颜色。
d)border-right:5px solid blue-右边框可以使用标记border-right来设置。属性值的次序是:右边框宽度、样式、颜色。

示例1:
<div style=" border-top : 2px dotted red ;"> 测试边界性能 </div>

结果:
测试边界性能



示例2:
<div style=" border-left : 2pt dashed green; "> 测试边界性能 </div>

结果:
测试边界性能




示例3:
<div style=" border-bottom: 5px ridge brown;"> 测试边界性能 </div>

结果:
测试边界性能



示例4:
<div style=" border-right: 5px groove #733366;"> 测试边界性能 </div>

结果:
测试边界性能




把以上的组合:
示例5:
<div style="
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
">
测试边界性能 </div>

结果:
测试边界性能



注意:在这个示例中我们使用div标记。但是你可以使用任何标准的html标记来设置样式。




一个注记
的CSS -层叠样式表可以用来与HTML标记的解释这个网站。 这简单的CSS将帮助您创建更优雅和简洁的HTML网页。 这并不需要任何额外的软件或编码。 所有网络浏览器能够处理的CSS代码。

注2 :如果需要,您可以使用不是
标签。 DIV标记将开始和结束在新的行。跨度不会超过标签领域。


privacy policy     license
© 2004-2010 HIOX INDIA - hioxindia.com