css 制作圆角
使用 border-radius 属性
CSS 的 border-radius 属性是创建圆角的主要方法。该属性可以接受一个或多个值，用于定义元素的四个角的圆角半径。语法如下：
.element {
border-radius: 10px;
}上述代码会将元素的四个角都设置为 10px 的圆角半径。
单独设置每个角的圆角
如果需要为每个角单独设置不同的圆角半径，可以使用以下方式：
.element {
border-radius: 10px 5px 15px 20px;
}值的顺序依次为：左上角、右上角、右下角、左下角。
使用百分比创建圆形
将 border-radius 设置为 50% 可以将元素变为圆形，前提是元素的宽度和高度相等：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}椭圆角效果
通过为 border-radius 提供两个值，可以创建椭圆角效果。第一个值控制水平半径，第二个值控制垂直半径：
.ellipse {
border-radius: 50% / 20%;
}使用 border-top-left-radius 等单独属性
如果需要更精确地控制某个角的圆角，可以使用以下单独属性：
.element {
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 20px;
}结合背景和边框
圆角效果可以与背景和边框结合使用，例如：
.box {
width: 200px;
height: 100px;
background: #3498db;
border: 2px solid #2980b9;
border-radius: 15px;
}响应式圆角
可以使用 CSS 变量或媒体查询实现响应式圆角：
:root {
--corner-radius: 8px;
}
.box {
border-radius: var(--corner-radius);
}
@media (max-width: 768px) {
:root {
--corner-radius: 4px;
}
}浏览器兼容性
border-radius 属性在现代浏览器中支持良好，包括 Chrome、Firefox、Safari、Edge 等。对于需要支持旧版浏览器的情况，可以添加厂商前缀：
.element {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}注意事项
- 圆角效果不会影响元素的内容或布局，仅影响视觉呈现。
- 如果元素有边框，圆角会同时应用于边框和背景。
- 对于图像，圆角会裁剪图像内容。
