html边框代码

作者：ンц枫飄落发布日期:2025-07-27 浏览:19

<!DOCTYPE html>
<html>
<head>
    <title>HTML 边框示例</title>
    <style>
        /* 定义一个类名为 'border-example' 的样式 */
        .border-example {
            border: 2px solid red; /* 设置边框宽度为2像素，样式为实线，颜色为红色 */
            padding: 10px; /* 内边距为10像素，使内容与边框之间有空间 */
            width: 200px; /* 设置元素的宽度为200像素 */
            text-align: center; /* 文本居中对齐 */
        }
    </style>
</head>
<body>

    <!-- 使用定义的样式类 -->
    <div class="border-example">
        这是一个带有红色边框的盒子。
    </div>

</body>
</html>

解释说明：

border: 2px solid red;：设置元素的边框宽度为2像素，样式为实线，颜色为红色。
padding: 10px;：设置内边距为10像素，确保文本和边框之间有一定的间距。
width: 200px;：设置元素的宽度为200像素。
text-align: center;：使文本在盒子中居中对齐。

你可以根据需要调整这些属性的值来改变边框的样式。

上一篇：html placeholder

下一篇：html怎么插入图片