css边框

The border is a thin layer between padding and margin. Editing the border you can make elements draw their perimeter on screen.

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

You can work on borders by using those properties:

您可以使用以下属性来处理边框：

• border-style

  border-style

• border-color

  border-color

• border-width

  border-width

The property border can be used as a shorthand for all those properties.

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

border-radius is used to create rounded corners.

border-radius用于创建圆角。

You also have the ability to use images as borders, an ability given to you by border-image and its specific separate properties:

您还可以将图像用作边框， border-image及其特定的单独属性赋予您以下功能：

• border-image-source

  border-image-source

• border-image-slice

  border-image-slice

• border-image-width

  border-image-width

• border-image-outset

  border-image-outset

• border-image-repeat

  border-image-repeat

Let’s start with border-style.

让我们从border-style开始。

边框样式 (The border style)

The border-style property lets you choose the style of the border. The options you can use are:

border-style属性使您可以选择border-style 。 您可以使用的选项是：

• dotted

  dotted

• dashed

  dashed

• solid

  solid

• double

  double

• groove

  groove

• ridge

  ridge

• inset

  inset

• outset

  outset

• none

  none

• hidden

  hidden

Check this Codepen for a live example

查看此Codepen的实时示例

The default for the style is none, so to make the border appear at all you need to change it to something else. solid is a good choice most of the times.

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

You can set a different style for each edge using the properties

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

• border-top-style

  border-top-style

• border-right-style

  border-right-style

• border-bottom-style

  border-bottom-style

• border-left-style

  border-left-style

or you can use border-style with multiple values to define them, using the usual Top-Right-Bottom-Left order:

或者您可以使用带有多个值的border-style来定义它们，使用通常的Top-Right-Bottom-Left顺序：

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

边框宽度 (The border width)

border-width is used to set the width of the border.

border-width用于设置border-width 。

You can use one of the pre-defined values:

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

• thin

  thin

• medium (the default value)

  medium (默认值)

• thick

  thick

or express a value in pixels, em or rem or any other valid length value.

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

Example:

例：

p {border-width: 2px;
}

You can set the width of each edge (Top-Right-Bottom-Left) separately by using 4 values:

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

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

or you can use the specific edge properties border-top-width, border-right-width, border-bottom-width, border-left-width.

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

边框颜色 (The border color)

border-color is used to set the color of the border.

border-color用于设置border-color 。

If you don’t set a color, the border by default is colored using the color of the text in the element.

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

You can pass any valid color value to border-color.

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

Example:

例：

p {border-color: yellow;
}

You can set the color of each edge (Top-Right-Bottom-Left) separately by using 4 values:

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

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

or you can use the specific edge properties border-top-color, border-right-color, border-bottom-color, border-left-color.

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

边境简写属性 (The border shorthand property)

Those 3 properties mentioned, border-width, border-style and border-color can be set using the shorthand property border.

可以使用速记属性border设置提到的这3个属性border-width ， border-style和border-color 。

Example:

例：

p {border: 2px black solid;
}

You can also use the edge-specific properties border-top, border-right, border-bottom, border-left.

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

Example:

例：

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

边界半径 (The border radius)

border-radius is used to set rounded corners to the border. You need to pass a value that will be used as the radius of the circle that will be used to round the border.

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

Usage:

用法：

p {border-radius: 3px;
}

You can also use the edge-specific properties border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

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

使用图像作为边框 (Using images as borders)

One very cool thing with borders is the ability to use images to style them. This lets you go very creative with borders.

带有边框的一件很酷的事情是使用图像对它们进行样式设置的能力。 这使您在边框方面变得很有创意。

We have 5 properties:

我们有5个属性：

• border-image-source

  border-image-source

• border-image-slice

  border-image-slice

• border-image-width

  border-image-width

• border-image-outset

  border-image-outset

• border-image-repeat

  border-image-repeat

and the shorthand border-image. I won’t go in much details here as images as borders would need a more in-depth coverage as the one I can do in this little chapter. I recommend reading the CSS Tricks almanac entry on border-image for more information.

以及简写的border-image 。 由于边框需要像我在本小章中可以做的那样更深入地介绍，因此在这里我将不做详细介绍。 我建议阅读有关边框图像的CSS Tricks年历条目，以获取更多信息。

翻译自: https://flaviocopes.com/css-border/

css边框