CSS边框线段样式

让我为大家介绍一下边框样式吧！如果大家想更进一步了解边框的使用，可以阅读这一篇文章：CSS边框border

属性描述
none没有边框,即忽略所有边框的宽度(默认值)
solid边框为单实线
dashed边框为虚线
dotted边框为点线
double边框为双实线

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            margin: 0 20px;
            background-color: red;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }
        .box1 {
            /* 没有边框 */
            border: none;
        }
        .box2 {
            /* 实线 */
            border: 10px solid #000;
        }
        .box3 {
            /* 虚线 */
            border: 10px dashed #000;
        }
        .box4 {
            /* 点线 */
            border: 10px dotted #000;
        }
        .box5 {
            /* 双实线 */
            border: 10px double #000;
        }
    </style>
</head>
<body>
    <div class="box1">none</div>
    <div class="box2">solid</div>
    <div class="box3">dashed</div>
    <div class="box4">dotted</div>
    <div class="box5">double</div>
</body>
</html>

代码效果：
在这里插入图片描述

感谢大家的阅读，如有不对的地方，可以向我指出，感谢大家！

posted @ 2023-10-23 09:14  一叶知秋04  阅读(42)  评论(0)  编辑  收藏  举报  来源