Css 简明教程

CSS - Borders Property

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

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

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

Importance of borders

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

Visual separation ：边框有助于在网页上从视觉上区分不同的元素，使用户更容易理解布局和导航。
Organization and structure ：网格、表格或盒体可以使用边框，这使得内容看起来更有条理和结构化。
Emphasis and focus ：可以给元素添加边框以强调和突出它们。
Design and aesthetics ：边框允许您添加装饰到元素以增强视觉吸引力。这可以通过边框的样式、颜色和宽度来实现。

Borders - Properties

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

Property

Description

Default value

style

指定边框应该是实线、虚线、双线还是其他可能的值

none

width

指定边框的宽度

medium

color

指定边框的颜色

元素的前景色，如果元素是空白的，则是父元素的颜色

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

CSS Borders - border-style Property

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

Value

Description

none

No border

hidden

隐藏边框，除表元素外，与 'none' 相同

dotted

A series of dots

dashes

一系列短破折号

solid

A single solid line

double

两条平行线，中间有小缝隙

groove

似乎刻在页面上的边框

ridge

似乎略微高于页面的边框

inset

似乎嵌入在页面上的边框

outset

似乎略微浮出页面的边框

initial

将 border-style 属性设置为其默认值

inherit

从其父元素那里继承 border-style 属性

让我们看一个 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 的每一边：

我们看一个示例：

<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 ：

让我们看一个示例（指定 border-style 和未指定 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* 的每一边：

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

我们看一个示例：

<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* 的第三个组成属性。它设置边框的颜色。

* border* 可以有一个、两个、三个或所有四个值。
如果没有为边框指定颜色，则默认值为 currentcolor ，即前景色。
可以传递任何类型的颜色值，例如 RGB、RGBA、十六进制等。

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

Value

Description

color

边框将为指定颜色

transparent

边框将为透明色

inherit

父元素的值被继承了

让我们看一个示例（指定 border-style 和未指定 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 的同一组值可以传递给每一单边：

我们看一个示例：

<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 ），可以使用简写边框属性。

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

   h2 {border-top: thin solid red;}

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

我们看一个示例：

<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 。

Syntax

   h2 {border: thick dotted green;}

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

我们看一个示例：

<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* 简写属性。参阅下面的示例代码以厘清这一点：

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

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

我们看一个示例：

<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

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

Syntax

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

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

我们看一个示例：

<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

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

Syntax

   img {border: 2em solid #ff00ff;}

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

我们看一个示例：

<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 为图像提供来源。

Points to remember:

在提供图像来源前声明 * border-style* ，否则，将不会显示任何图像作为边框。
如果没有指定 * border-width* ，则它将默认为“中”，即大约 3px。

border-image-source

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

Syntax

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

border-image-slice

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

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

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

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

参考以下语法：

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

border-image-width

要指定要作为边框设置的图像的宽度，可以使用属性 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* 。

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

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* 更改。

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

Syntax

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

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

CSS Border Image - Shorthand

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

Syntax

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

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

我们看一个示例：

<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>