欢迎光临
我们一直在努力

CSS | 盒子模型之边框border)

首先,需要了解盒子模型的意义!

知识点一:哪里是边框,使用什么属性控制?

元素的边框是围绕元素内容和内边距的一条或多条线。使用border表示边框。

知识点二:边框主要包含哪些方面?

当设置边框时吗,我们需要考虑三个方面:宽度、样式、颜色。

知识点三:边框有哪些样式可以选择?

  • solid 实线
  • dotted 点线
  • dashed 虚线
  • double 双实线

知识点四:如何定义单个边框的样式?

  • border-top-style 用来定义上边框的样式
  • border-right-style 用来定义右边框的样式
  • border-bottom-style 用来定义下边框的样式
  • border-left-style 用力定义左边框的样式

知识点五:如何快速设置四个边框的样式?

我们可以使用 border-style:值 快速设置border四个边框的样式,值有四个,中间用空格隔开,值为要设置的上、右、下、左的样式。

用知识点四和五做一个小例子,下里面两种书写方式所表达的意思相同。

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

知识点六:如何定义边框的宽度?

注意:在定义边框的宽度前,必须要设置边框的样式!如果不设置样式,那么系统默认隐藏,宽度默认为 0 !

  • border-top-color 用来定义上边框的样式
  • border-right-color 用来定义右边框的样式
  • border-bottom-color 用来定义下边框的样式
  • border-left-color 用力定义左边框的样式

同样可以根据“上右下左”的规则快速设置四个边的颜色。如:border-color:1px 2px 3px 4px;表示设置上右下左边框宽度分别为1/2/3/4px。

知识点七:透明边框

我们上面讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。 CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。 如下面的例子:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

我们为上面的链接定义了如下样式:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

从某种意义上说,利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。 重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent 的支持。在以前的版本,IE 会根据元素的 color 值来设置边框颜色。

知识点八: 最后附上所有定义边框的属性

border              简写属性,用于把针对四个边的属性设置在一个声明。
border-style        用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width        简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color        简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。   
border-bottom       简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left         简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color   设置元素的左边框的颜色。
border-left-style   设置元素的左边框的样式。
border-left-width   设置元素的左边框的宽度。
border-right        简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color  设置元素的右边框的颜色。
border-right-style  设置元素的右边框的样式。
border-right-width  设置元素的右边框的宽度。
border-top          简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color    设置元素的上边框的颜色。
border-top-style    设置元素的上边框的样式。
border-top-width    设置元素的上边框的宽度。
赞(0) 打赏
未经允许不得转载:散人研 » CSS | 盒子模型之边框border)
分享到: 更多 (0)

评论 抢沙发

4 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏