CSS边框的实例教程边框是在padding和margin之间的一个薄层。编辑边框可以使元素在屏幕上画出其周长。你可以通

边框是在padding和margin之间的一个薄层。编辑边框可以使元素在屏幕上画出其周长。

你可以通过使用这些属性对边框进行处理。

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

border-radius 是用来创建圆角的。

你也有能力使用图像作为边框，这种能力是由border-image 及其特定的独立属性赋予你的。

让我们从border-style 。

边框样式

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

查看这个Codepen中的实际例子

样式的默认值是none ，所以要使边框出现，你需要把它改成其他的东西。solid 在大多数情况下是个不错的选择。

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

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

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

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

你可以使用其中一个预定义的值。

或用像素、em或rem或任何其他有效的长度值来表达一个值。

例如。

你可以通过使用4个值分别设置每条边（上-右-下-左）的宽度。

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

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

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

如果你不设置颜色，默认情况下边框的颜色是使用元素中文本的颜色。

你可以把任何有效的颜色值传给border-color 。

例子。

p {
  border-color: yellow;
}

你可以通过使用4个值分别设置每个边缘（上-右-下-左）的颜色。

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

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

上面提到的3个属性，border-width,border-style 和border-color 可以用速记属性border 来设置。

例子。

p {
  border: 2px black solid;
}

你也可以使用特定的边缘属性border-top,border-right,border-bottom,border-left 。

例子。

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

border-radius 是用来给边框设置圆角的。你需要传递一个值，它将被用作圆角边框的半径。

用法。

p {
  border-radius: 3px;
}

你也可以使用边框专用属性border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius 。

边界的一个非常酷的东西是可以使用图像来设计它们。这让你可以很有创意地使用边框。

我们有5个属性。

和简写的border-image 。我不会在这里讲太多细节，因为图像作为边框需要更深入的介绍，而我在这一小章中可以做到。我建议阅读CSS技巧年鉴中关于border-image的条目以获得更多信息。