在index.html中通过CSS的border-radius属性设置圆角，可内联（style="border-radius:8px;"）、内部（<style>）或外部CSS实现；支持像素、百分比等单位及四角独立设置，50%在正方形上生成正圆，需配合overflow:hidden防止内容溢出。
用 border-radius 设置元素圆角
直接在 CSS 中给元素加 border-radius 就能生效，它作用于元素的边框（包括背景和内容区域的裁剪边界）。这个属性不是只影响边框线，而是整个盒模型的四个角。
- 值为单个长度（如
8px）时，四个角等效应用 - 支持不同单位：
px、rem、%（百分比基于元素自身的宽高计算） - 可分别设置四角：
border-radius: 4px 8px 12px 16px;（顺时针：左上、右上、右下、左下） - 圆角超过元素宽高一半时，会自动“压扁”，比如
border-radius: 50%;在正方形上才得到真圆
border-radius 在 index.html 里怎么写？
你不能直接在 HTML 标签里写 border-radius，必须通过 style 属性或外部/内部 CSS。内联样式最简单，适合快速调试：
<div style="border-radius: 6px; background: #eee; padding: 12px;"> 这个 div 四角是圆的 </div>
但更推荐用 <style> 块或外部 CSS 文件，避免样式散落在 HTML 中：
<style>
.card {
border-radius: 8px;
overflow: hidden; /* 防止子元素溢出破坏圆角 */
}
</style>为什么设置了 border-radius 却没效果？
常见原因不是语法错，而是被其他样式覆盖或布局干扰：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
overflow: hidden但子元素用了position: absolute并越界 —— 圆角会被裁掉，需确保子元素在父容器可视区域内 - 元素没有背景色或边框，导致视觉上“看不出”圆角（其实已生效）
- 使用了
transform（如scale或rotate）后，某些浏览器可能渲染异常，可加backface-visibility: hidden;缓解 - 旧版 Safari 对
%单位的border-radius支持不稳定，建议用像素值保底
图片或按钮的圆角要特别注意什么？
图片本身不响应 border-radius，除非它被包裹在块级容器中，或自身设为块级并加 display: block;：
<img src="avatar.jpg" style="border-radius: 50%; width: 60px; height: 60px; object-fit: cover;">
按钮（<button>）默认是可圆角的，但部分浏览器对原生表单控件的渲染有保留边框行为，建议显式清除：
- 加
border: none;避免边框盖住圆角 - 加
background-clip: padding-box;确保背景不溢出圆角边界 - 若用
outline（如聚焦态），记得用outline-offset控制偏移，否则可能破坏视觉圆角感
圆角不是独立存在的装饰，它和 overflow、background-clip、object-fit 这些属性联动紧密，单独调一个值往往不够。
