在 CSS3 中，制作圆角边框最常用的方法是使用 border-radius 属性。下面按常见用法给你详细说明。
.box {
width: 200px;
height: 100px;
border: 2px solid #333;
border-radius: 10px;
}
✅ 效果：四个角都变成 10px 的圆角
.box {
border-radius: 10px 20px 30px 40px;
}
顺序为：
左上 → 右上 → 右下 → 左下
.box {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
.ellipse {
width: 200px;
height: 100px;
border-radius: 50%;
}
.btn {
padding: 10px 30px;
border-radius: 999px;
}
.box {
border-radius: 20px / 10px;
}
解释：
.card {
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
✅ border-radius 从 IE9+ 开始支持
✅ 现代浏览器（Chrome / Firefox / Edge / Safari）完全支持
❌ 不需要前缀（已过时）
| 场景 | 写法 |
|---|---|
| 普通圆角 | border-radius: 8px; |
| 圆形 | border-radius: 50%; |
| 胶囊按钮 | border-radius: 999px; |
| 只圆上方 | border-radius: 10px 10px 0 0; |
如果你需要 配合渐变边框、图片圆角、或动画效果，我也可以继续帮你写示例。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
