border

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 $200 的免费积分!

border 属性是 CSS 中的简写语法,它接受多个值用于在应用它的元素周围绘制线条。

.belement{
  border: 3px solid red;
  width: 200px;
  aspect-ratio: 1;
}
 

语法

border: <line-width> || <line-style> || <color>

border 属性接受以下一个或多个值的组合

  • border-width:指定边框的厚度。
    • : 一个用pxemremvhvw 单位测量的数值。
    • thin: 等效于 1px
    • medium: 等效于 3px
    • thick: 等效于 5px
  • border-style:指定围绕元素绘制的线类型,包括
    • solid: 一条实线。
    • none(默认值):不绘制任何线条。
    • hidden: 绘制一条线,但不可见。这对于在不显示边框的情况下为元素添加一些额外宽度非常有用。
    • dashed: 一条由虚线组成的线。
    • dotted: 一条由点组成的线。
    • double: 在元素周围绘制两条线。
    • groove: 根据颜色值添加一个斜角,使元素看起来压入文档中。
    • ridge: 与 groove 类似,但反转颜色值,使元素看起来突出。
    • inset: 向线添加一个分色调,使元素看起来稍微凹陷。
    • outset: 与 inset 类似,但反转颜色,使元素看起来稍微突出。
  • border-color: 指定边框的颜色,并接受所有有效的颜色值。

哇,一个属性有这么多值!以下是一个演示,它说明了所有这些样式值之间的差异

组成属性

border 属性是以下与边框相关的属性的简写

物理属性逻辑属性
border-topborder-block-start
border-bottomborder-block-end
border-leftborder-inline-start
border-rightborder-inline-end

所以,这个

.element {
  border: 3px solid #f8a100;
}

…与…相同

.element {
  border-top: 3px solid #f8a100;
  border-right: 3px solid #f8a100;
  border-bottom: 3px solid #f8a100;
  border-left: 3px solid #f8a100;
}

…或者 逻辑等效

.element {
  border-block-start: 3px solid #f8a100;
  border-inline-end: 3px solid #f8a100;
  border-block-end: 3px solid #f8a100;
  border-inline-start: 3px solid #f8a100;
}

由于一些逻辑属性有自己的简写,我们可以只在 内联 方向声明边框。

.element {
  /* The top (start) and bottom (end) borders */
  border-block: 3px solid #f8a100;
  /* The left (start) and right (end) borders */
  border-inline: 3px solid #f8a100;
}

浏览器支持

您可以依靠所有浏览器对 border 属性的出色支持。

ChromeSafariFirefoxOperaIEAndroidiOS
3.5+4+

更多信息