CSS border边框讲解教程（真的很详细）

最新推荐文章于 2024-07-08 17:09:50 发布

易点互联

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量1.5k

点赞数 28

文章标签： css3 css 前端 border

本文链接：https://blog.csdn.net/libol/article/details/139918392

版权

CSS Border 是前端开发中用于控制元素边框外观的重要属性。边框不仅能够增强网页的视觉层次感，还能提供清晰的界面分区，对于提升用户体验和网页设计美学至关重要。

基本概念介绍

CSS Border 允许你定义元素的边框，包括其大小、样式和颜色。边框可以是实体的，也可以是空间的，它们可以是矩形，也可以是圆形或椭圆形，取决于元素的形状和 border-radius 属性的设置。

Border 属性详解

CSS border 属性是一个简写属性，允许你在一个声明中设置多个边框属性。其基本语法如下：

border: width style color;

width：边框的宽度，可以是具体数值（如 1px）、相对单位（如 thin、medium、thick）。
style：边框的样式，常见的有 solid（实线）、dotted（点状）、dashed（虚线）、double（双线）等。
color：边框的颜色，可以是颜色名（如 red）、十六进制值（如 #ff0000）、RGB 值（如 rgb(255, 0, 0)）等。

示例代码与效果展示

以下是一个 CSS Border 的示例代码：

.border-box {
  width: 100px;
  height: 100px;
  border: 5px solid red; /* 设置边框宽度为5px，样式为实线，颜色为红色 */
}

在 HTML 中应用上述样式的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Example</title>
<style>
  .border-box {
    width: 100px;
    height: 100px;
    border: 5px solid red;
    margin: 20px;
    background-color: lightyellow; /* 设置背景色以便更好地展示边框 */
  }
</style>
</head>
<body>

<div class="border-box"></div>

</body>
</html>

在上述 HTML 结构中，.border-box 类的 div 元素将展示添加了边框的效果。你可以在任何现代浏览器中打开此 HTML 文件，查看边框效果。

单个方向边框设置

在 CSS 中，除了可以为元素设置统一的边框外，还可以为特定方向的边框进行单独设置，这增加了设计的灵活性。以下是针对各个方向边框的属性：

border-top：应用于元素顶部边框。
border-right：应用于元素右侧边框。
border-bottom：应用于元素底部边框。
border-left：应用于元素左侧边框。

这些属性各自接受与 border 简写属性相同的三个值：宽度、样式和颜色。

示例代码

.directional-borders {
  width: 150px;
  height: 150px;
  border-top: 3px solid blue;    /* 顶部边框 */
  border-right: 3px dashed green;/* 右侧虚线边框 */
  border-bottom: 3px dotted red; /* 底部点状边框 */
  border-left: 3px double black;  /* 左侧双线边框 */
}

边框样式和设计

CSS 边框样式可以极大地丰富元素的视觉效果。以下是一些常用的边框样式：

dotted：点状边框，适合需要轻微分隔的界面元素。
dashed：虚线边框，用于需要较明显分隔的场合。
solid：实线边框，最为常见，用于强调边框。
double：双线边框，可以为元素添加额外的强调。

示例代码

.styles-border {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.dotted-border {
  border: 4px dotted gray; /* 点状灰色边框 */
}

.dashed-border {
  border: 4px dashed darkorange; /* 虚线深橙色边框 */
}

.solid-border {
  border: 4px solid violet; /* 实线紫罗兰色边框 */
}

.double-border {
  border: 4px double blue; /* 双线蓝色边框 */
}

效果展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directional and Styled Borders Example</title>
<style>
  .directional-borders {
    width: 150px;
    height: 150px;
    border-top: 3px solid blue;
    border-right: 3px dashed green;
    border-bottom: 3px dotted red;
    border-left: 3px double black;
  }

  .styles-border {
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  .dotted-border {
    border: 4px dotted gray;
  }

  .dashed-border {
    border: 4px dashed darkorange;
  }

  .solid-border {
    border: 4px solid violet;
  }

  .double-border {
    border: 4px double blue;
  }
</style>
</head>
<body>

<div class="directional-borders"></div>
<div class="styles-border dotted-border"></div>
<div class="styles-border dashed-border"></div>
<div class="styles-border solid-border"></div>
<div class="styles-border double-border"></div>

</body>
</html>

通过上述代码，你将看到不同方向和样式边框的应用效果。这些示例展示了 CSS 边框在设计中的多样性和实用性。通过合理运用边框样式，可以为网页元素添加丰富的视觉效果和层次感。

圆角边框

CSS3 引入了 border-radius 属性，它允许你创建圆角边框，为元素的角落添加不同半径的圆弧，从而带来更加现代和流畅的视觉效果。

示例代码

.rounded-border {
  width: 120px;
  height: 120px;
  background-color: lightgreen;
  border: 4px solid brown;
  border-radius: 20px; /* 设置所有角落的圆角半径为20px */
}

效果展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Borders Example</title>
<style>
  .rounded-border {
    width: 120px;
    height: 120px;
    background-color: lightgreen;
    border: 4px solid brown;
    border-radius: 20px;
  }
</style>
</head>
<body>

<div class="rounded-border"></div>

</body>
</html>

边框图片

border-image 属性允许你使用图片来创建边框，为边框提供更加丰富和个性化的外观。这个属性需要你指定图片的路径以及如何将图片分割和重复以适应边框。

示例代码

.border-image {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 10px solid;
  border-image: url('border-image.png') 30 round; /* 使用图片作为边框，图片文件名为 'border-image.png' */
}

在这个示例中，border-image 属性的值由四部分组成：

图片路径：url('border-image.png')。
边框宽度：30，表示图片边框的宽度。
边框切片：round，表示图片如何被分割和重复。

通过上述代码，你可以使用图片作为边框的元素。border-image 属性为创建复杂和独特的边框效果提供了强大的灵活性。

边框与布局

在 CSS 中，边框是元素盒模型的一部分，它对元素的尺寸和布局有着直接的影响。边框的宽度会加到元素的 width 和 height 上，这可能会导致布局出现意外的变化，特别是当边框宽度设置得比较大时。

边框对尺寸的影响

默认情况下，当你为元素添加边框时，边框宽度会叠加到元素的总宽度和高度上。例如，如果你设置一个元素的宽度为 100px，并且添加了 10px 的边框宽度，那么元素的实际宽度将会是 120px（假设边框是单边的）。

边框对布局的影响

边框的宽度和样式可能会影响元素的布局，尤其是在紧密排列的元素之间。如果一个元素的边框宽度比周围元素大，它可能会在布局中占据更多的空间，从而影响其他元素的位置。

示例代码

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: lightblue;
}

.bordered-box {
  border: 10px solid black; /* 边框宽度为10px */
}

效果展示

以下是上述 CSS 应用于 HTML 结构的效果示例。你可以在 W3School 的在线编辑器中运行以下代码来查看边框对布局的影响。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border and Layout Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightblue;
  }

  .bordered-box {
    border: 10px solid black;
  }
</style>
</head>
<body>

<div class="box"></div>
<div class="box bordered-box"></div>

</body>
</html>

在这个示例中，你将看到两个相同的 .box 元素，其中一个添加了边框。添加了边框的元素在视觉上看起来更宽，因为它的实际宽度包括了边框的宽度。

解决方案

为了解决边框影响元素尺寸的问题，可以使用 box-sizing 属性。将 box-sizing 设置为 border-box 可以让元素的 width 和 height 包括内容、内边距和边框，这样边框就不会额外增加元素的尺寸。

.box { box-sizing: border-box; /* 边框包含在尺寸内 */ }

通过这种方式，即使添加了边框，元素的总尺寸也不会改变，从而避免了边框对布局的意外影响。

YDUIbuilder：简化CSS边框设计，低代码实现高效率布局

开源免费下载：yduibuilder: 快速开发UI界面，原型设计即前端开发

YDUIbuilder低代码平台，让CSS边框设置变得轻而易举。通过直观的拖拽和样式配置，您可以快速实现元素的边框效果，无论是精细的圆角边框还是个性化的图片边框。YDUIbuilder的强大布局工具确保边框宽度和样式不会影响您的页面布局，保持设计的精确性和一致性。完成设计后，一键下载代码，获得完整的项目控制权。YDUIbuilder，是提升开发效率、实现创意自由的得力助手。