课程目录

CSS边框border

阅读: 4461    发布时间: 2018-01-11 15:37:49

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。


CSS 边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。


边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

我们将边框设为虚线，可以很清楚的看出边框是在背景之上的 

border-style: dashed;
border-color: green;

尝试一下》


边框的样式

通过border-style定义border的样式，和padding一样，可以最多4个参数，按照上、右、下、左的方式生效。 

border-style: dashed solid dotted double;

尝试一下》


也可以针对每个边框进行设置

  • border-top-style

  • border-right-style

  • border-bottom-style

  • border-left-style


border-style的可能取值

值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。



边框的宽度

通过border-width 定义border的宽度，同样地，按照上、右、下、左的方式生效。 

border-width: 2px 5px 8px 10px;


同样地，也可以单独设置每个边框的宽度

  • border-top-width

  • border-right-width

  • border-bottom-width

  • border-left-width



边框的颜色

通过border-color 定义border的颜色，同样地，按照上、右、下、左的方式生效。 

border-color: yellow black blue green;

同样地，也可以单独设置每个边框的颜色

  • border-top-color

  • border-right-color

  • border-bottom-color

  • border-left-color


在一个声明中设置边框

  • 可在一个声明中设置边框宽度／样式／颜色

  • 参数顺序可调换，小编一般都按照宽度样式颜色的顺序声明

  • border: 1px solid red;      设置4个边框

  • border-bottom:: 1px solid red;   设置下边框


透明边框

先来看一个栗子：

鼠标移入的时候，会添加一个1px 红色实线边框，同时我们会看到按钮变大了，为什么呢？因为加入了边框后，元素变大了呗～～ 

<style>

  a{
      height: 30px;
      line-height: 30px;
      padding: 10px;
      text-decoration: none;
      background-color: green;
      color: white;
  }
  a:hover{
      border: 1px solid red;
  }
</style>

<a href="#">鼠标移入看看</a>

尝试一下》


解决办法就是，默认情况下给超链接设置1个同样宽度的边框，但是颜色设为透明 

a{
    border: 1px solid transparent;
}
a:hover{
    border: 1px solid red;
}

尝试一下》

← CSS内边距padding

-END-