html虚线

作者：花小泽ノ发布日期:2026-04-21 浏览:43

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用border-style属性设置虚线边框 */
        .dashed-border {
            border: 2px dashed black; /* 设置边框为2像素宽的黑色虚线 */
            padding: 20px; /* 内边距，使内容与边框之间有一些空间 */
            width: 200px; /* 宽度 */
            text-align: center; /* 文本居中 */
        }
    </style>
</head>
<body>

<div class="dashed-border">
    这是一个带有虚线边框的 div 元素。
</div>

</body>
</html>

解释说明：

border: 2px dashed black;：这一行代码设置了元素的边框样式。2px表示边框的宽度，dashed表示虚线样式，black表示边框的颜色。
padding: 20px;：内边距，使得内容与边框之间有一定的间距，避免内容紧贴边框。
width: 200px;：设置 div 元素的宽度为 200 像素。
text-align: center;：使文本在 div 中居中显示。

这个示例展示了如何使用 CSS 来创建一个带有虚线边框的 HTML 元素。

上一篇：html中label标签属性介绍

下一篇：iframe html