边框

box model 模块中, 我们考虑了一个帧类比来描述盒模型的每个部分。

三个相框相邻。
中间框架的上面有箱形模型的各个部分

边框是广告框的边框 border 属性提供了大量用于创建该帧的选项 几乎任何您能想到的风格

边框属性

通过各个 border 属性,您可以为边框的各个部分设置样式。

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:1. <ph type="x-smartling-placeholder">
  • Safari:1. <ph type="x-smartling-placeholder">

来源

样式

要显示边框 您必须定义 border-style。 有以下几个选项可供选择:

使用 ridgeinsetoutsetgroove 样式时, 浏览器会加深显示第二种颜色的边框颜色,以呈现对比效果和深度。 此行为可能会因浏览器而异 尤其是对于 black 等深色。 在 Chrome 浏览器中,这些边框样式会显示为实线;而在 Firefox 中, 这些颜色会变浅,然后采用较深的第二种颜色。

对于其他边框样式,浏览器行为也可能会有所不同 因此,请务必在不同的浏览器中测试您的网站 这种差异的一个常见示例是,每个浏览器如何呈现 dotteddashed 样式。

<ph type="x-smartling-placeholder">
</ph> Chrome 中的边框演示、
  Firefox 和 Safari,展现出了细微差别
  边界的显示方式
Chrome、Firefox 和 Safari 中显示的边框。

要为框的每一侧设置边框样式,请执行以下操作: 您可以使用 border-top-styleborder-right-style, border-left-style, 和 border-bottom-style

简写

marginpadding 一样, 您可以使用 border 简写属性在一个声明中定义边界的所有部分。

.my-element {
    border: 1px solid red;
}

border 简写形式中值的顺序是 border-width, 按 border-style,接着按 border-color

颜色

你可以为盒子的所有面设置颜色,也可以使用 border-color。 默认情况下,它会使用框的当前文本颜色:currentColor。 这意味着,如果您只声明边框属性, 例如宽度 除非您明确设置,否则颜色将是计算值。

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

要设置框的每一侧边框颜色,请执行以下操作: 使用 border-top-colorborder-right-color, border-left-colorborder-bottom-color

宽度

边框的宽度是指线条的粗细,由 border-width。 默认边框宽度为medium。 不过,在您定义样式之前,这些元素将不可见。 您可以使用其他已命名的宽度,例如 thinthick

border-width 属性也接受长度单位,例如 pxemrem%。 要设置框每一侧的边框宽度,请使用 border-top-widthborder-right-width, border-left-widthborder-bottom-width

逻辑属性

在 在逻辑属性模块中,了解了如何引用块流和内嵌流, 而不是明确的顶、右、下或左边。

您还可以使用边框这一功能:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

在此示例中,.my-element 的所有面均定义为具有 2px, 虚线边框,表示当前文本颜色。 然后,将 inline-end 边框定义为 2px(实心红色)。 也就是说,在从左到右的语言(例如英语)中, 红色边框会显示在文本框的右侧 对于从右到左书写的语言(如阿拉伯语)- 红色边框将位于方框的左侧

浏览器支持因边框中的逻辑属性而异, 因此,请务必在使用前查看支持信息。

圆角半径

要为框添加圆角,请使用 border-radius 属性。

.my-element {
    border-radius: 1em;
}

这种简写形式可为框的每个角添加一致的边框。 与其他边框属性一样 您可以使用 border-top-left-radiusborder-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius

您还可以通过简写形式指定每个角的半径, 顺序如下:左上角、右上角、右下角和左下角。

.my-element {
    border-radius: 1em 2em 3em 4em;
}

通过为角定义单个值, 因为边框半径分成了两部分,所以使用的是另一种简写形式: 垂直和水平各条。 这意味着,当您设置 border-top-left-radius: 1em 时, 您将设置左上角和左上角之间的半径。

您可以为每个角定义这两个属性,如下所示:

.my-element {
    border-top-left-radius: 1em 2em;
}

这会添加 border-top-left-top1emborder-top-left-left 值为 2em。 这会将左上角边界半径转换为椭圆半径, 而不是默认的圆形半径

您可以使用 border-radius 简写形式定义这些值, 使用 / 在标准值后面定义椭圆值。 这能让您发挥创造力,制作一些复杂的形状。

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

边框图片

在 CSS 中,您并非必须使用基于描边的边框。 您还可以使用任何类型的图片 border-image。 通过此简写属性,您可以设置来源图片、 裁剪方式、图片宽度 边框距离边缘有多远以及应如何重复。

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width 属性类似 border-width: 它可用于设置边框图片的宽度。 border-image-outset 属性可让您设置边框图片与其环绕框之间的距离。

border-image-source

border-image-source (边框图片的来源)可以是任何有效图片的 url,包括 CSS 渐变。

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice 属性是个实用属性,可让您将图片分割为 9 个部分,每部分都包含 4 条线。 其工作原理类似于 margin 简写形式,其中您定义了顶部、右侧、底部和左侧偏移值

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

演示中使用的图片,带有蓝色线条的四个切片显示

定义偏移值后 现在,图片有 9 个部分:4 个角、4 条边和 1 个中间部分。 边角会应用于带有边框图片的元素的角。 这些边缘会应用到该元素的边缘。 border-image-repeat 属性定义了这些边缘如何填充其空间, border-image-width 属性控制切片的大小。

最后,fill 关键字决定了切片左侧中间部分是否用作元素的背景图片。

border-image-repeat

border-image-repeat 是指示 CSS 如何重复显示边框图片的方式。 其工作方式与 background-repeat 相同。

  • 初始值为 stretch, 此方法会拉伸源图片,以尽可能填充可用空间。
  • repeat 值会尽可能多地平铺源图片边缘, 并且可能会裁剪边缘区域来实现这一点。
  • round 值与重复相同, 但不是裁剪图像边缘区域以适应尽可能多的区域, 它会拉伸和重复执行图像,以实现无缝重复
  • space 值再次与重复相同, 但此值会在各个边缘区域之间增加空间,从而形成无缝图案。

检查您的理解情况

测试您对边界知识的了解情况

默认边框颜色是什么?

historicColor
currentColor
white
black
.my-element {
  border: solid hotpink;
}

边框的默认宽度是多少?

solid
1px
medium

border-inline: 1px solid会...

在第一行添加边框
在顶部和底部添加边框(采用拉丁语布局)。
在内部加上边框。
左右添加边框(采用拉丁语布局)。