在 css 中设置圆角主要通过 border-radius 属性实现，1. 使用一个值可统一设置四个角；2. 使用两个值分别设置对角；3. 单独设置每个角的属性；4. 使用百分比或 vw/vh 单位实现响应式圆角；5. 通过媒体查询调整不同屏幕下的圆角大小；6. 对老旧浏览器采用优雅降级、css 前缀或 JavaScript 库兼容；7. 利用不同值组合可创建半圆、四分之一圆及不规则形状等复杂效果。
CSS 中设置圆角主要通过 border-radius 属性来实现。它允许你控制元素边框的圆角程度，使页面设计更加柔和和美观。
解决方案：
border-radius 属性接受一个或两个值。一个值时，表示所有四个角都应用相同的圆角半径。两个值时，第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。你也可以单独设置每个角的圆角半径，使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-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-radius 还可以使用百分比值。百分比值相对于元素的宽度或高度，具体取决于哪个方向的半径被设置。
CSS圆角属性的兼容性问题及解决方案
border-radius 属性在现代浏览器中得到了很好的支持，包括 chrome、firefox、safari、edge 和 Opera。 然而，对于一些老旧的浏览器，特别是 IE8 及更早版本，可能不支持 border-radius 属性。
解决方案：
-
优雅降级： 对于不支持 border-radius 的浏览器，可以不显示圆角效果，或者使用其他替代方案，例如使用图片来模拟圆角。这可以通过条件注释或 JavaScript 来实现。
<!--[if lt IE 9]> <style> .rounded-box { /* 使用图片或其他替代方案模拟圆角 */ background: url('rounded-corners.png') no-repeat; } </style> <![endif]--> -
使用 CSS 前缀： 虽然现代浏览器已经不再需要，但为了兼容一些较老的浏览器版本，可以考虑添加 CSS 前缀。
.rounded-box { -webkit-border-radius: 10px; /* Safari 和 Chrome */ -moz-border-radius: 10px; /* Firefox */ border-radius: 10px; /* 标准语法 */ } -
使用 JavaScript 库： 有一些 JavaScript 库可以帮助在不支持 border-radius 的浏览器中模拟圆角效果，例如 jquery ui。
border-radius的高级用法：创建复杂形状
border-radius 不仅仅可以创建简单的圆角，还可以通过组合不同的值来创建更复杂的形状。
-
创建半圆： 将元素的宽度或高度设置为圆角半径的两倍，并将 border-radius 设置为 50%。
.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-radius 创建响应式圆角效果
在响应式设计中，我们可能需要根据屏幕尺寸调整圆角的大小。 这可以通过使用百分比值或 vw 和 vh 单位来实现。
-
使用百分比值： border-radius 的百分比值是相对于元素的宽度或高度计算的。 这使得圆角的大小可以随着元素的大小自动调整。
.responsive-rounded-box { width: 50%; height: auto; background-color: #eee; border-radius: 10%; /* 圆角半径是元素宽度的 10% */ } -
使用 vw 和 vh 单位： vw 和 vh 单位分别代表视口宽度和高度的百分比。 使用这些单位可以使圆角的大小相对于视口大小进行调整。
.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 属性，你可以轻松地为你的网页添加各种圆角效果，并创建出更具吸引力和现代感的设计。记住，在实际项目中，要充分考虑浏览器的兼容性，并根据需要选择合适的解决方案。
