html圆角边框怎么设置

作者：网络神话—爷恋发布日期:2026-06-03 浏览:103

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 CSS 设置圆角边框 */
        .rounded-border {
            width: 200px;
            height: 100px;
            border: 2px solid black;
            border-radius: 25px; /* 圆角半径设置为 25px */
            padding: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>

<div class="rounded-border">
    这是一个带有圆角边框的 div。
</div>

</body>
</html>

解释说明：

border-radius: 用于设置元素的圆角。可以为每个角指定不同的半径值，或者使用统一的值（如上例中的 25px）。
border: 设置边框的样式、宽度和颜色。
padding: 设置内容与边框之间的间距。
text-align 和 line-height: 用于居中对齐文本并调整行高，使文本在 div 中居中显示。

通过这些属性，你可以轻松创建一个带有圆角边框的 HTML 元素。

上一篇：浏览器不支持html5播放器

下一篇：html embed