html 圆角

作者：烟寂断魂发布日期:2025-02-15 浏览:69

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 圆角示例</title>
    <style>
        /* 使用 CSS 的 border-radius 属性来设置圆角 */
        .rounded-box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            border-radius: 25px; /* 设置圆角半径为 25px */
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            color: white;
        }
    </style>
</head>
<body>

<div class="rounded-box">这是一个圆角盒子</div>

</body>
</html>

解释说明：

border-radius 是 CSS 中用于设置元素圆角的属性。
在这个例子中，我们创建了一个宽度为 200px、高度为 100px 的 div 元素，并通过 border-radius: 25px; 将其四个角设置为半径为 25px 的圆角。
你可以根据需要调整 border-radius 的值，以实现不同的圆角效果。例如，设置 border-radius: 50%; 可以创建一个圆形的元素。

上一篇：表格html

下一篇：html input radio