CSS 播客 - 016:边框
在框模型模块中,我们考虑了使用帧类比来描述框模型的每个部分。
边框框是框的框架,border
属性为您提供了大量选项,供您以您能想到的几乎任何样式创建该框架。
边框属性
单个 border
属性提供了一种为边框的各个部分设置样式的方法。
风格
如需显示边框,您必须定义 border-style
。有以下几个选项可供选择:
使用 ridge
、inset
、outset
和 groove
样式时,浏览器会将第二种颜色的边框颜色调暗,以提供对比和深度。此行为可能会因浏览器而异,尤其是对于深色(例如 black
)而言。在 Chrome 中,这些边框样式将显示为纯色;在 Firefox 中,这些边框样式会变浅,然后再提供更深的第二种颜色。
浏览器行为也可能因边框样式而异,因此一定要在不同的浏览器中测试您的网站。这种差异的一个常见示例是,每个浏览器如何渲染 dotted
和 dashed
样式。
若要为框的每一侧设置边框样式,您可以使用 border-top-style
、border-right-style
、border-left-style
和 border-bottom-style
。
简写
与 margin
和 padding
一样,您可以使用 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-color
、border-right-color
、border-left-color
和 border-bottom-color
。
宽度
边框的宽度是线条的粗细,由 border-width
控制。默认边框宽度为 medium
。
不过,除非您定义样式,否则此属性将不可见。您可以使用其他已命名的宽度,例如 thin
和 thick
。
border-width
属性还接受长度单位,例如 px
、em
、rem
或 %
。如需为框的每一侧设置边框宽度,请使用 border-top-width
、border-right-width
、border-left-width
和 border-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-radius
、border-top-right-radius
、border-bottom-right-radius
和 border-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-top
值 1em
和 border-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
(边框图片的来源)可以是任何有效图片(包括 CSS 渐变)的 url
。
.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 个边和中间部分。这些角会应用于带有边框图片的元素角。
这些边缘会应用于相应元素的边缘。border-image-repeat
属性会定义这些边缘的填充方式,border-image-width
属性用于控制切片的大小。
最后,fill
关键字会确定是否将切片剩下的中间部分用作元素的背景图片。
border-image-repeat
border-image-repeat
用于指示 CSS 如何重复显示边框图片。其运作方式与 background-repeat
相同。
- 初始值为
stretch
,即拉伸源图片以填充可用空间。 repeat
值会尽可能多地平铺源图像的边缘,并且可能会裁剪边缘区域以实现这一点。round
值与重复值相同,但不是裁剪图片边缘区域以适应尽可能多的尺寸,而是拉伸图片并重复绘制以实现无缝重复space
值再次返回,与重复相同,但此值会在每个边缘区域之间增加空间,以形成无缝图案。
检查您的掌握程度
检验你对边界知识的掌握情况
默认的边框颜色是什么?
black
white
currentColor
text-color
值,并且是默认的边框颜色。historicColor
.my-element { border: solid hotpink; }
边框的默认宽度是多少?
1px
medium
solid
border-style
值,而不是 border-width
值。border-inline: 1px solid
会...
border-block
是顶部和底部。