考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > CSS/HTML > 文章内容
  

CSS基础教程:边框的样式

 [ 2016年5月4日 ] 【

边框的样式

样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。

例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:

a:link img {border-style: outset;}

定义多种样式

您可以为一个边框定义多个样式,例如:

p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

因此这两种方法是等价的:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。

本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved