如何使用 CSS 制作圆角？

CSS 的 border-radius 属性可以用来制作圆角。该属性可以为一个 HTML 元素的边框添加圆角，使其变得更加圆润。

语法

border-radius: value;

其中，value 可以为一个或多个值，表示不同的角度。可以使用以下的语法表示不同的边：

• border-radius: 5px：所有角都是 5 像素的圆角
• border-radius: 10px 20px：左上角和右下角是 10 像素的圆角，右上角和左下角是 20 像素的圆角
• border-radius: 5px 10px 15px 20px：左上角是 5 像素的圆角，右上角是 10 像素的圆角，右下角是 15 像素的圆角，左下角是 20 像素的圆角

示例

下面是一个示例，展示了如何使用 CSS 制作圆角：

<div style="background-color: coral; width: 200px; height: 100px; border-radius: 10px;">Hello, world!</div>

可以看到，上述代码将一个 div 元素的背景色设置为 coral，宽度设置为 200 像素，高度设置为 100 像素，并且添加了一个 10 像素的圆角边框。

总结

通过 CSS 的 border-radius 属性，我们可以轻松地制作圆角，并且可以使用不同的值来控制不同的圆角大小和样式。这非常有用，特别是在设计漂亮的用户界面时。