CSS边框

如何在CSS中使用边框

边框是填充和边距之间的薄层。编辑边框,可以使元素在屏幕上绘制其边界。

您可以使用以下属性在边界上工作:

  • border-style
  • border-color
  • border-width

物业border可以用作所有这些属性的简写。

border-radius用于创建圆角。

您还可以将图像用作边框,这是由您赋予的功能border-image及其特定的单独属性:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

让我们开始border-style

边框样式

border-style属性可让您选择边框的样式。您可以使用的选项是:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

查看这个Codepen举一个真实的例子

样式的默认值为none,因此要使边框完全显示,您需要将其更改为其他内容。solid在大多数情况下是一个不错的选择。

您可以使用属性为每个边缘设置不同的样式

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

或者你可以使用border-style使用多个值来定义它们,使用通常的上下左右顺序:

p {
  border-style: solid dotted solid dotted;
}

边框宽度

border-width用于设置边框的宽度。

您可以使用以下预定义的值之一:

  • thin
  • medium(默认值)
  • thick

或以像素,em或rem表示的值或任何其他有效长度值。

例子:

p {
  border-width: 2px;
}

您可以使用4个值分别设置每个边缘的宽度(上下左右)。

p {
  border-width: 2px 1px 2px 1px;
}

或者您可以使用特定的边缘属性border-top-widthborder-right-widthborder-bottom-widthborder-left-width

边框颜色

border-color用于设置边框的颜色。

如果未设置颜色,则默认情况下将使用元素中文本的颜色为边框着色。

您可以将任何有效的颜色值传递给border-color

例子:

p {
  border-color: yellow;
}

您可以使用4个值分别设置每个边缘的颜色(上下左右):

p {
  border-color: black red yellow blue;
}

或者您可以使用特定的边缘属性border-top-colorborder-right-colorborder-bottom-colorborder-left-color

边境简写属性

提到的那3个属性,border-widthborder-styleborder-color可以使用简写属性设置border

例子:

p {
  border: 2px black solid;
}

您还可以使用特定于边缘的属性border-topborder-rightborder-bottomborder-left

例子:

p {
  border-left: 2px black solid;
  border-right: 3px red dashed;
}

边界半径

border-radius用于设置边框的圆角。您需要传递一个值,该值将用作将边界变圆的圆的半径。

用法:

p {
  border-radius: 3px;
}

您还可以使用特定于边缘的属性border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius

使用图像作为边框

有边框的一件很酷的事情是使用图像对它们进行样式设置的能力。这使您可以非常有创意地使用边框。

我们有5个属性:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

和速记border-image。由于边框需要像我在本小章中可以做的那样更深入地介绍,因此在这里我将不做详细介绍。我建议阅读CSS欺骗边框图像上的年历条目欲获得更多信息。

免费下载我的CSS手册


更多CSS教程: