Css 简明教程

CSS - Borders Property

在设计和样式设置的背景下，边框指的是围绕对象（如文本框、图像或网页上的任何其他 HTML 元素）的内容的装饰性或功能性元素。

A border, in the context of design and styling, refers to a decorative or functional element that surrounds the content of an object, such as a text box, image, or any other HTML element on a web page.

border 属性是用来为元素（如 div、图像或文本）创建一个边框。它允许您自定义边框的外观，包括其颜色、宽度和样式。

The border property is used to create a border around an element, such as a div, image, or text. It allows you to customize the appearance of the border, including its color, width, and style.

边框在网页的整体美学和设计中扮演着至关重要的角色。

Borders play a vital role in the overall aesthetics and design of the webpage.

Importance of borders

在 CSS 中使用边框的重要性可以总结如下：

The importance of using borders in CSS can be summarized as follows:

Visual separation: Borders help to visually separate different elements on a webpage, making it easier for users to understand the layout and navigation.
Organization and structure: Borders can be given to grids, tables or even boxes that makes the content look more organized and structured.
Emphasis and focus: Borders can be given to elements to emphasize and highlight them.
Design and aesthetics: Borders allow to add you to add decoration to the elements to enhance the visual appeal. This can be achieved using the style, color and width of border.

Borders - Properties

下表描述了各种边框属性、它们的描述以及它们保持的默认值：

Following table describes the various properties of border, their description and default values they hold:

Property

Description

Default value

style

specifies whether a border should be solid, dashed line, double line, or one of the other possible values

none

width

specifies the width of a border

medium

color

specifies the color of a border

foreground color of the element and if element is blank, then color of the parent element

现在，我们将通过示例了解如何使用这些属性。

Now, we will see how to use these properties with examples.

CSS Borders - border-style Property

border-style 属性是边框的基本属性之一。可以将以下值传递给边框样式：

The border-style property is one of the essential properties of border. Following values can be passed to border-style:

Value

Description

none

No border

hidden

A hidden border, same as 'none' except for table elements

dotted

A series of dots

dashes

A series of short dashes

solid

A single solid line

double

Two parallel lines with a small gap between them

groove

A border that appears to be carved into the page

ridge

A border that appears to be slightly raised above the page

inset

A border that appears embedded into the page

outset

A border that appears slightly raised out of the page

initial

Sets the border-style property to its default value

inherit

Inherits the border-style property from its parent element

让我们看一个 border-style 的这些值的示例：

Let us see an example for these values of border-style:

<html>
<head>
<style>
      p.none {border-style: none;}
      p.hidden {border-style: hidden;}
      p.dotted {border-style: dotted;}
      p.dashes {border-style: dashed;}
      p.solid {border-style: solid;}
      p.double {border-style: double;}
      p.groove {border-style: groove;}
      p.ridge {border-style: ridge;}
      p.inset {border-style: inset;}
      p.outset {border-style: outset;}
      p.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
   <h2>border-style Property</h2>
      <p class="none">No border.</p>
      <p class="hidden">Hidden border.</p>
      <p class="dotted">Dotted border.</p>
      <p class="dashes">Dashed border.</p>
      <p class="solid">Solid border.</p>
      <p class="double">Double border.</p>
      <p class="groove">Groove border.</p>
      <p class="ridge">Ridge border.</p>
      <p class="inset">Inset border.</p>
      <p class="outset">Outset border.</p>
      <p class="mixed">A mixed border.</p>
</body>
<html>

Single Side - Border Style

border-style 属性可以专门为每一边指定。同一组值可以传递给 border-style 的每一边：

The property border-style can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-style:

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   p {border-top-style: dotted; border-right-style: solid; border-bottom-style: dashed; border-left-style: double;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-style (single-side)</h2>
      <p>Different border styles on all sides.</p>
</body>
<html>

CSS BorderS - width Property

border-width 属性在设置边框样式后是下一行。可以传递以下值给 border-width ：

The border-width property is next in line after setting border style. Following values can be passed to border-width:

让我们看一个示例（指定 border-style 和未指定 border-style ）：

Let us see an example (with and without specifying border-style):

<html>
  <head>
   <style>
      p.thin {border-width: thin;}
      p.medium {border-width: medium;}
      p.thick {border-width: thick;}
      p.length {border-width: 100px;}
      p.thin1 {border-style: double; border-width: thin;}
      p.medium1 {border-style: dashed; border-width: medium;}
      p.thick1 {border-style: solid; border-width: thick;}
      p.length1 {border-style: dotted; border-width: 10px;}
   </style>
  </head>
  <body>
      <h2>border-width without <i>border-style</i> property</h2>
      <p class="thin">Thin border.</p>
      <p class="medium">Medium border.</p>
      <p class="thick">Thick border.</p>
      <p class="length">Specific length border.</p>
      <h2>border-width with <i>border-style</i> property</h2>
      <p class="thin1">Thin width.</p>
      <p class="medium1">Medium width.</p>
      <p class="thick1">Thick width.</p>
      <p class="length1">Specific length width border.</p>
  </body>
</html>

Single Side - Border Width

border-width* 属性可以专门为每一边指定。同一组值可以传递给 * border-width* 的每一边：

The property border-width can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-width:

border-top-width
border-right-width
border-bottom-width
border-left-width

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   p {border-style: solid;
      border-top-width: thin;
      border-right-width: thick;
      border-bottom-width: medium;
      border-left-width: 10px;
      padding: 2em;}
</style>
</head>
<body>
   <h2>border-width (single-side)</h2>
      <p>Different border widths on all sides.</p>
</body>
</html>

CSS Borders - color Property

border-color* 是 * border* 的第三个组成属性。它设置边框的颜色。

The border-color is the third constituent property of border. It sets the color of the border.

border can have one, two, three or all four values.
If no color is specified for border, the default value is currentcolor i.e. the foreground color.
Any type of color value can be passed, such as RGB, RGBA, hexadecimal, etc.

可以传递以下值给 * border* ：

Following values can be passed to border:

Value

Description

color

the border will be of the color specified

transparent

the border will be transparent

inherit

the parent element’s value is inherited

让我们看一个示例（指定 border-style 和未指定 border-style ）：

Let us see an example (with and without specifying border-style):

<html>
<head>
<style>
   p.color1 {border-color: red;}
   p.hexa1 {border-color: #00ff00;}
   p.color2 {border-style: dashed; border-color: red;}
   p.hexa2 {border-style: solid; border-color: #00ff00;}
</style>
</head>
<body>
   <h2>border-color without <i>border-style</i> property</h2>
   <p class="color1">Red color with name.</p>
   <p class="hexa1">Green color with hexadecimal.</p>
   <h2>border-color with <i>border-style</i> property</h2>
   <p class="color2">Red color with name.</p>
   <p class="hexa2">Green color with hexadecimal.</p>
</body>
</html>

Single Side - Border Color

属性 * border-color* 可以专门为每一单边指定。 border-color 的同一组值可以传递给每一单边：

The property border-color can be exclusively specified for each single-side. The same set of values can be passed to each single-side for border-color:

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   p {border-style: solid;
      border-top-color: red;
      border-right-color: #0000ff;
      border-bottom-color: rgb(100,123,111);
      border-left-color: rgba(50,123,111,0.4);
      padding: 0.5in;}
</style>
</head>
<body>
   <h2>Different border color on all sides</h2>
   <p>Check the border colors!!!</p>
</body>
</html>

CSS Borders - Single-Side Shorthand Properties

在希望只沿着元素的一侧应用所有边框属性时（如 style, width 和 color ），可以使用简写边框属性。

In case you want to apply all the border properties, such as style, width and color, along just one side of an element, you can make use of the shorthand border properties.

例如，如果要在 h2 元素的顶侧应用边框属性，则可以使用如下语法：

For example, if the border properties are to be applied to top side of an h2 element, you can use the following syntax:

   h2 {border-top: thin solid red;}

基于任何元素的每一侧的四个简写属性如下：

Four shorthand properties, based on each side of any element, are as follows:

我们看一个示例：

Let us see an example:

<html>
   <head>
      <style>
         p {border-top: red dashed thick;
            border-right: solid #0000ff medium;
            border-bottom: thin double rgb(100,123,111);
            border-left: rgba(50,123,111,0.4) 15px solid;
            padding: 2cm;}
      </style>
   </head>
   <body>
         <h2>Shorthand single-side border properties</h2>
         <p>Check the borders!!!</p>
   </body>
</html>

CSS Borders - Global - Shorthand Property

在元素的所有侧上用于边框的最小的可能的简写属性是 border 。

The smallest possible shorthand property for border on all sides of an element is border.

Syntax

   h2 {border: thick dotted green;}

上面的代码将在 h2 元素的四面添加一个绿色、虚线且粗的边框。

The above code will add a green, dotted and thick border on all the four sides of h2 element.

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   p {border: green dashed thick;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

但仍然可选用任何单独属于传递的属性来覆盖 * border* 简写属性。参阅下面的示例代码以厘清这一点：

But you still have the option of overriding the border shorthand property with any individual property passed exclusively. See the following sample code to clarify this point:

   h2 {border: thin solid gray;}
   h2 {border-bottom-width: 15px;}

上面的代码将在所有边上都有一个细、实线且灰色的边框，除了底部外，底部的宽度将为 15 像素。

The above code will have a thin, solid and gray border on all the sides except for the bottom where the width will be of 15px.

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   p {border: #0000ff dashed thick;
      border-bottom-width: 15px;
      padding: 2cm;}
</style>
</head>
<body>
   <h2>Shorthand border property</h2>
   <p>Check the borders!!!</p>
</body>
</html>

CSS Borders - Borders and Inline Elements

可以以相同的方式向任何内联元素赋予边框。边框厚度不会对元素的行高产生任何影响。如果内联元素中指定了左、右边框，它将使文本移到边框周围。

Borders can be given to any inline element in the same manner. The border’s thickness will not have any effect on the line height of element. If left and right borders are specified in an inline element, it will displace the text around the border.

Syntax

strong {border-top: thin solid green; border-bottom: 5px dotted #ff00ff;}

上面的代码会将边框应用于段落中的粗体文本，在顶部是绿色、细且实线边框，在底部是洋红色、5px 虚线边框。

Above code will apply the border to strong text in the paragraph as green, thin and solid border on the top and magenta-colored, 5px dotted border on the bottom side.

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   strong {border-top: thick solid green;
   border-bottom: 5px dashed #ff00ff;
   background-color: silver;}
</style>
</head>
<body>
   <div>
      <p>Check the <strong>inline elements with borders</strong> and rest has no border.</p>
   </div>
</body>
</html>

CSS Borders - Replaced Elements

对于替换元素（如图像），应用边框将影响行高。

In case of replaced elements, such as an image, the line height will get affected by applying border.

Syntax

   img {border: 2em solid #ff00ff;}

上面的代码将在图像周围应用一个实线、洋红色、2em 宽的边框。

Above code will apply a solid, magenta-colored, 2em wide border around the image.

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   img {border: 1em solid #ff00ff;}
</style>
</head>
<body>
   <div>
      <p>Check the logo <img src="images/logo.png" alt="logo image"> with borders altering the line height.</p>
   </div>
</body>
</html>

CSS Borders - Images

为了使边框更加复杂和有趣，可以将图像添加到元素的边框。为了这样做，需要使用属性 border-image-source 为图像提供来源。

Just to make the border more complicated and interesting, an image can be added as a border to an element. In order to do that you need to provide a source for your image using the property border-image-source.

Points to remember:

Declare the border-style before providing an image source, else no image will be displayed as the border.
If no border-width is specified, then it will default to medium, which is approximately, 3px.

border-image-source

此属性指定要作为元素的边框传递的图像来源。

This property specifies the source of an image to be passed as a border to an element.

Syntax

   border: 10px solid; border-image-source: url('URL');

border-image-slice

使用属性 * border-image-source* 指定的图像可以通过属性 * border-image-slice* 切割。

The image specified using the property border-image-source can be sliced using the property border-image-slice.

该属性顾名思义，用于切割图像。它会将图像分成 9 个区域，即 4 个角、4 条边和一个中间区域。

As the name suggests, this property is used to slice up an image. It divides the image in 9 regions, with 4 corners, 4 edges and a middle region.

下图展示了 * border-image-slice* 属性的功能：

The following diagram demonstrates function of border-image-slice property:

Note : * border-image-slice* 的偏移量可以按百分比和长度单位提供。但是，强烈建议使用百分比。

Note: Offset for border-image-slice can be provided in terms of percentage and length units. But, percentages are highly recommended.

参考以下语法：

Refer the following syntax for example:

   border: 20px solid;
   border-image-source: url('URL');
   border-image-slice: 25%;

border-image-width

要指定要作为边框设置的图像的宽度，可以使用属性 border-image-width 。

To specify the width of the image to be set as a border, you can use the property border-image-width.

Syntax

   border: 20px solid;
   border-image-source: url('URL');
   border-image-width: 15px;
   border-image-slice: 33.33%;

border-image-outset

为了避免图像边框和内容的重叠，可以使用属性 * border-image-outset* 。

In order to avoid the overlapping of the image borders and the content, you can use the property border-image-outset.

此属性将边框图像推到外部，超出边框框。

This property pushes the border image outside, beyond the border box.

Syntax

   border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-width: 1;
   border-image-slice: 10;
   border-image-outset: 8px;

border-image-repeat

默认情况下，边框图像将在侧面拉伸，但这可以使用属性 * border-image-repeat* 更改。

By default the border image gets stretched along the sides, but this can be changed, using the property border-image-repeat.

此属性重复在边框侧面指定的图像，直到填充整个长度和宽度。

This property repeats the image specified along the sides of the border, until the whole length and width is not filled.

Syntax

   border: 20px solid;
   padding: 1em;
   border-image-source: url('URL');
   border-image-repeat: repeat;

它还可以取 round 的值，除了 stretch 和 repeat 。

It can also take the value as round, apart from stretch and repeat.

CSS Border Image - Shorthand

简便起见，有一个用于设置边框图像的简写，即 * border-image* 。传递给简写 border-image 的值使用 solidus 符号（/）分隔。应该以特定顺序列出这些值，即 slice ，然后是 width ，最后是 offset 。

For brevity purpose, there is a shorthand for setting up of border image, i.e., border-image. The values passed to shorthand border-image are separated using the solidus symbol (/). The values should be listed in a specific order, which is slice, then width and last is offset.

Syntax

   border-image: url('URL'), 40% 25% 20% fill / 12px 5px / 5px space;

注意：你还可以只使用一个值来声明属性 * border-image* ，即 URL，其余值将为默认值。

Note: You can also declare the property border-image with just one value i.e., URL and rest of the values will be default.

我们看一个示例：

Let us see an example:

<html>
<head>
<style>
   .box {
      width: 200px;
      height: 200px;
      border: 20px solid;
      border-image: url(images/border.png) 30 round;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>