欢迎来到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-texiao/texiao51667.shtml