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

您可以经过 border-width 属性为边框指定宽度。

为边框指定宽度有两种法子:可以指定长度值,例如 2px 或 0.1em;概略应用 3 个枢纽字之一,它们划分是 thin 、medium(默认值) 和 thick。

评释:CSS 不有界说 3 个症结字的详细宽度,所以一个用户代理可能把 thin 、medium 与 thick 划分设置装备摆设为即是 5px、3px 和 2px,而另一个用户署理则分袂设置装备摆设为 3px、2px 和 1px。

以是,咱们可以何等设置装备摆设边框的宽度:

 

p {border-style: solid; border-width: 5px;}

也许:

 

p {border-style: solid; border-width: thick;}

界说单边宽度

您可以依据 top-right-bottom-left 的顺叙设置装备摆设元素的各边边框:

 

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也能够简写为(何等写法称为值复制):

 

p {border-style: solid; border-width: 15px 5px;}

您也可以经过下列属性分别配置边框各边的宽度:

  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width

因此,下面的规则与上面的例子是等价的:

 

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

没有边框

在后面的例子中,您曾经看到,要是祈望展现某种边框,就必需配置边框款式,比如 solid 或 outset。

那么如果把 border-style 配置为 none 会涌现甚么情况:

 

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px,然则边框技俩配置为 none。在这种情况下,不仅边框的花式不有了,其宽度也会变为 0。边框消失了,为甚么呢?

这是由于假如边框花式为 none,即边框根蒂根基不存在,那么边框就不可能有宽度,是以边框宽度积极设置装备摆设为 0,而岂论您原来定义的是什么。

记取这一点极为必要。毕竟上,遗记声名边框名堂是一个常犯的纰谬。根据如下规定,全部 h1 元素都不会有任何边框,更没必要说 20 像素宽了:

 

h1 {border-width: 20px;}

由于 border-style 的默认值是 none,假设没有声名样式,就相当于 border-style: none。于是,要是您渴望边框呈现,就必需声名一个边框格局。

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