HTML 边框样式 – 来学习啦 – 编程乐园，实战驱动的编程学习平台

HTML 边框样式

天天向上

发布： 2025-01-03 22:54:11

原创

943 人浏览过

HTML 中的边框样式通常通过 CSS 来定义，使用 border 属性来控制元素的边框。边框可以应用于几乎所有的 HTML 元素（如 div、p、img 等），并且可以定义边框的宽度、样式和颜色。

1. 边框的基本属性

要定义一个元素的边框，通常使用以下三个属性：

border-width: 设置边框的宽度。
border-style: 设置边框的样式（如实线、虚线等）。
border-color: 设置边框的颜色。

你也可以直接使用 border 属性一次性设置这三个值。

2. 边框样式的语法

语法一：分别设置边框的宽度、样式和颜色

selector {
    border-width: 2px;      /* 设置边框宽度 */
    border-style: solid;    /* 设置边框样式 */
    border-color: red;      /* 设置边框颜色 */
}

语法二：使用简写方式

selector {
    border: 2px solid red;  /* 设置边框宽度、样式和颜色 */
}

3. 常见的边框样式

border-style 属性有以下几种常见值：

none: 无边框。
solid: 实线边框。
dashed: 虚线边框。
dotted: 点线边框。
double: 双线边框。
groove: 内凹边框，3D效果。
ridge: 外凸边框，3D效果。
inset: 像嵌入的边框，3D效果。
outset: 外突的边框，3D效果。

4. 不同的边框样式示例

示例 1：设置实线边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式示例</title>
    <style>
        div {
            border: 2px solid blue; /* 蓝色实线边框 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有蓝色实线边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周有一个 2px 宽的蓝色实线边框。

示例 2：设置虚线边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式示例</title>
    <style>
        div {
            border: 2px dashed red; /* 红色虚线边框 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有红色虚线边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周有一个 2px 宽的红色虚线边框。

示例 3：设置点线边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式示例</title>
    <style>
        div {
            border: 2px dotted green; /* 绿色点线边框 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有绿色点线边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周有一个 2px 宽的绿色点线边框。

示例 4：设置双线边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式示例</title>
    <style>
        div {
            border: 4px double purple; /* 紫色双线边框 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有紫色双线边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周有一个 4px 宽的紫色双线边框。

示例 5：设置3D效果的边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式示例</title>
    <style>
        div {
            border: 4px groove orange; /* 橙色凹陷3D效果边框 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有橙色3D效果凹陷边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周有一个 4px 宽的橙色凹陷边框，呈现出 3D 效果。

5. 边框宽度的设置

border-width 属性用于设置边框的宽度，可以使用 px、em 或其他 CSS 单位。它可以是单一值，也可以为不同的边框设置不同的宽度（分别设置上、右、下、左的宽度）。

示例：设置不同宽度的边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框宽度示例</title>
    <style>
        div {
            border-width: 2px 5px 10px 20px; /* 上、右、下、左分别设置边框宽度 */
            border-style: solid;
            border-color: green;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个有不同宽度边框的容器</div>
</body>
</html>

输出：

显示一个包含文本的 div 元素，四周的边框宽度分别为：上 2px，右 5px，下 10px，左 20px，边框颜色为绿色。

6. 边框在 HTML 中如何工作

边框是在 CSS 中通过 border 属性来控制的。每个 HTML 元素（如 div、p、h1 等）都可以有一个边框。边框通常是与元素的其他视觉样式（如背景色、内外边距等）一起工作，形成最终的布局效果。

边框的效果通常会影响元素的 总尺寸，即元素的宽度和高度会包括边框的宽度。例如，一个宽度为 100px、高度为 50px 的 div，如果有 2px 的边框，它的总宽度会变为 104px（100px + 2px + 2px），高度会变为 54px（50px + 2px + 2px）。

7. 总结

边框样式：可以通过 border-style 来定义边框的外观，如实线、虚线、点线等。
边框宽度：可以通过 border-width 设置边框的宽度，支持不同的单位（如 px）。
边框颜色：可以通过 border-color 设置边框的颜色，也可以直接在 border 属性中设置宽度、样式和颜色。
灵活性：CSS 提供了多种方法来定制边框样式，使得网页的布局和外观更加丰富。

通过这些基本属性和样式，你可以在 HTML 中灵活控制元素的边框效果，提升网页的视觉表现。