边框三要素_border的三个属性-优快云博客

本文链接：https://blog.youkuaiyun.com/xjj19999272/article/details/116990402

本文详细介绍了CSS中边框属性的三个核心要素：线宽度、线型和线颜色，并通过实例展示了不同线型的应用效果及如何单独设置这些小属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框三要素

border属性

border属性需要三个要素：线宽度、线型、线颜色，示例如下：

border: 1px solid red;

示例代码分别表示线宽度为1px、线型为实线、线颜色为红色。

线型

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            margin-bottom: 10px;
        }
        .box1 {
            border: 3px dashed blue;
        }
        .box2 {
            border: 3px solid red;
        }
        .box3 {
            border: 3px dotted green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

网页效果如下：
在这里插入图片描述

边框的三要素小属性

小属性	意义
border-width	线宽
border-style	线型
border-color	线颜色

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border-width: 3px;
            border-style: dotted;
            border-color: red;
    </style>
</head>
<body>
    <div></div>
</body>
</html>

网页效果如下：
在这里插入图片描述