CSS Border 边框属性-之路教程

边框圆角

使用 CSS border-radius 属性，我们可以为元素添加圆角边框。

border-radius属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

CSS 边框作为速记属性

CSS 边框属性是以下各个边框属性的简写属性：

CSS border-width 属性，它设置元素边框的所有四个边的宽度。
CSS border-style 属性，它设置元素边框的所有四个边的样式。
CSS border-color 属性，它设置元素边框所有四个边的颜色。

边框速记属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

边框（border）和轮廓（outline）的区别

轮廓和边界通常令人困惑，因为它们非常相似。
但是这两者之间有区别：

轮廓是在元素内容之外绘制的，因此它们不占用空间。
轮廓通常是矩形的，尽管它们不是必须的。

边框宽度

border-width 属性设置边框的宽度。

宽度可以以像素为单位指定。
它也可以由三个预定义值之一指定：中等、薄或者厚。

我们不能单独使用“边框宽度”属性。
不起作用。
首先使用“border-style”设置边框。

边框宽度属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

边框颜色

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

可以通过以下方式设置颜色：

name - 指定颜色名称，如红色“red”
RGB - 指定一个 RGB 值，如“rgb(255,0,0)”
Hex - 指定一个十六进制值，如“#ff0000”

我们不能单独使用“边框颜色”属性。
不起作用。
首先使用“border-style”设置边框。

通常，我们将这三个属性写在一行中。

边框颜色属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

我们可以使用我们的 CSS Maker 工具尝试其他示例。

边框样式

CSS border-style 属性设置元素边框所有四个边的样式。

边框放置在元素背景的顶部。
它可以具有一到四个值。
所以，每一方都可以有它的价值。
border-style 的默认值为 none。

边框样式具有以下值：

dotted
dashed
solid
double
groove
ridge
inset
outset

某些浏览器不支持某些样式。
通常，当不支持某种样式时，浏览器会将边框绘制为实心边框。

CSS各个边的边框

CSS 提供了指定每个边框（右、左、下和上）的属性。

border-style 属性可以有 4 个值，例如，border-style: dotted solid double dashed;其中顶部边框为虚线，底部边框为双色，右侧边框为实线，左侧边框为虚线。

border-style 属性可以有 3 个值，例如，border-style: dotted solid double;其中上边框为虚线，下边框为双色，左右边框为实线。

border-style 属性可以有 2 个值，例如，border-style: dotted solid;其中左右边框为实线，上下边框为虚线。
而且，当然，这个属性只能有 1 个值，例如，border-style:solid；所有边都是实心的。

各个边的边框属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

CSS Border 边框属性

在本章中，我们将讨论边框以及如何为它们提供样式。

我们可以为边框提供宽度、样式和颜色。

边框属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

日期：2020-06-02 22:14:25 来源：oir作者：oir

←CSS border-image-repeat 属性

CSS box-decoration-break 属性→