什么是border-radius属性？ - css学习-微参考

在HTML和CSS的领域里，`border-radius` 是一个非常常用且实用的CSS属性，它允许开发者设计圆角边框，而无需使用额外的图片或其他复杂的技术。这个属性为元素提供了更加平滑、美观的外观，是创建现代Web设计的关键因素之一。

`border-radius` 属性用于设置一个元素四个角的圆角半径。通过指定不同半径，可以创建各种形状，如圆角矩形、椭圆形甚至圆形。此属性可以被应用在几乎所有的HTML元素上，只要该元素能够接受边框样式。

语法

`border-radius` 的基本语法相当直接。它能够接受一到四个值，分别对应不同的角。

单一值：如果设置一个值，那么所有四个角将应用该半径。

.rounded-box {
border-radius: 10px;
}

两个值：第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。

.rounded-box {
border-radius: 10px 20px;
}

三个值：第一个值应用于左上角，第二个值应用于右上角和左下角，第三个值应用于右下角。

.rounded-box {
border-radius: 10px 20px 30px;
}

四个值：分别设置左上角、右上角、右下角、左下角的半径。以顺时针顺序排列。

.rounded-box {
border-radius: 10px 20px 30px 40px;
}

此外，`border-radius` 还可以使用百分比来设置半径值，这可以让圆角的半径基于元素的宽度和高度动态变化。

使用示例

以下是一个简单的CSS样式示例，说明如何使用 `border-radius` 创建一个圆形的按钮。

.circle-button {
width: 100px;
height: 100px;
background-color: #007bff;
border: none; /* 移除边框 */
color: white;
font-size: 16px;
border-radius: 50%; /* 50% 的半径值使得按钮四个角都是圆的 */
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}