在
css
中设置圆角主要通过 border-radius 属性实现，1. 使用一个值可统一设置四个角；2. 使用两个值分别设置对角；3. 单独设置每个角的属性；4. 使用百分比或 vw/vh 单位实现响应式圆角；5. 通过媒体查询调整不同屏幕下的圆角大小；6. 对老旧
浏览器
采用优雅降级、css 前缀或 javascript 库兼容；7. 利用不同值组合可创建半圆、四分之一圆及不规则形状等复杂效果。
CSS 中设置圆角主要通过
属性来实现。它允许你控制元素边框的圆角程度，使页面设计更加柔和和美观。
解决方案：
属性接受一个或两个值。一个值时，表示所有四个角都应用相同的圆角半径。两个值时，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。你也可以单独设置每个角的圆角半径，使用
、
、
和
属性。
立即学习
“
前端免费学习笔记（深入）
”；
例如：
还可以使用百分比值。百分比值相对于元素的宽度或高度，具体取决于哪个方向的半径被设置。
CSS圆角属性的兼容性问题及解决方案
属性在现代浏览器中得到了很好的支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。 然而，对于一些老旧的浏览器，特别是 IE8 及更早版本，可能不支持
属性。
解决方案：
优雅降级：
对于不支持
的浏览器，可以不显示圆角效果，或者使用其他替代方案，例如使用图片来模拟圆角。这可以通过条件注释或 JavaScript 来实现。
使用 CSS 前缀：
虽然现代浏览器已经不再需要，但为了兼容一些较老的浏览器版本，可以考虑添加 CSS 前缀。
使用 JavaScript 库：
有一些 JavaScript 库可以帮助在不支持
的浏览器中模拟圆角效果，例如
。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
的高级用法：创建复杂形状
不仅仅可以创建简单的圆角，还可以通过组合不同的值来创建更复杂的形状。
创建半圆：
将元素的宽度或高度设置为圆角半径的两倍，并将
设置为 50%。
创建四分之一圆：
将元素的宽度和高度设置为相同的值，并将
设置为元素的宽度或高度。
创建不规则形状：
通过调整每个角的圆角半径，可以创建各种不规则形状。这需要对
的各个属性进行精细的控制。
使用
创建响应式圆角效果
在响应式设计中，我们可能需要根据屏幕尺寸调整圆角的大小。 这可以通过使用百分比值或
和
单位来实现。
使用百分比值：
的百分比值是相对于元素的宽度或高度计算的。 这使得圆角的大小可以随着元素的大小自动调整。
使用和单位：
和
单位分别代表视口宽度和高度的百分比。 使用这些单位可以使圆角的大小相对于视口大小进行调整。
使用媒体查询：
通过媒体查询，可以根据不同的屏幕尺寸应用不同的
值。
通过灵活运用
属性，你可以轻松地为你的网页添加各种圆角效果，并创建出更具吸引力和现代感的设计。记住，在实际项目中，要充分考虑浏览器的兼容性，并根据需要选择合适的解决方案。
border-radiusborder-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius.rounded-box {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 10px; /* 所有角都应用 10px 的圆角 */
}
.custom-rounded-box {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
border-top-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 5px;
}
.oval-box {
width: 200px;
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 50%; /* 创建一个椭圆或者圆形 */
}border-radiusborder-radiusborder-radiusborder-radius.rounded-box {
-webkit-border-radius: 10px; /* Safari 和 Chrome */
-moz-border-radius: 10px; /* Firefox */
border-radius: 10px; /* 标准语法 */
}border-radiusjQuery UIborder-radiusborder-radiusborder-radius.semi-circle {
width: 100px;
height: 50px;
background-color: #eee;
border-radius: 50px 50px 0 0; /* 上半圆 */
}border-radius.quarter-circle {
width: 50px;
height: 50px;
background-color: #eee;
border-radius: 50px 0 0 0; /* 左上角四分之一圆 */
}border-radius.irregular-shape {
width: 100px;
height: 100px;
background-color: #eee;
border-radius: 30px 70px 30px 70px;
}border-radiusvwvhborder-radius.responsive-rounded-box {
width: 50%;
height: auto;
background-color: #eee;
border-radius: 10%; /* 圆角半径是元素宽度的 10% */
}vwvhvwvh.responsive-rounded-box {
width: 80vw;
height: 40vh;
background-color: #eee;
border-radius: 2vw; /* 圆角半径是视口宽度的 2% */
}border-radius.responsive-rounded-box {
width: 100px;
height: 50px;
background-color: #eee;
border-radius: 5px;
@media (min-width: 768px) {
border-radius: 10px;
width: 200px;
height: 100px;
}
}border-radius