用border-radius可直接为HTML块级元素（如div）设置圆角，支持像素值（如12px）、百分比（50%生成正圆或椭圆）及四角独立设置（如8px 16px 8px 16px），需配合overflow:hidden裁剪内容，注意兼容性与box-shadow协同渲染。
用 border-radius 直接设置圆角
HTML 本身不提供“画矩形”的能力，所谓圆角矩形，实际是用 CSS 给一个块级元素（比如 <div>）加圆角边框。核心就是 <code>border-radius 这个属性，它控制边框圆角的曲率半径。
最简做法：在 index.html 的 <style></style> 或外部 CSS 中写：
<div style="width: 200px; height: 100px; background: #4a90e2; border-radius: 12px;"></div>
-
border-radius: 12px表示四个角都用 12 像素半径做圆角 - 也可以写成
border-radius: 8px 16px 8px 16px，分别对应左上、右上、右下、左下 - 值为
50%时，如果宽高等比，会变成正圆；若宽高不等，是椭圆 - 注意：不要只设
border却漏掉background或height/width，否则矩形不可见
避免 overflow: hidden 裁剪内容
当圆角矩形里有文字、图片或子元素超出边界时，容易被意外裁掉——这是很多人踩坑的地方。默认情况下，border-radius 只影响边框和背景，不自动裁剪内容区域。
- 如果子元素（如
<img alt="index.html中怎么制作圆角矩形？" >或绝对定位的图标）跑出圆角范围，得手动加overflow: hidden才能裁剪 - 但加了之后，阴影（
box-shadow）也会被裁，解决方法是给父容器加overflow: hidden，同时把阴影加在伪元素或兄弟元素上 - 移动端 Safari 对
overflow: hidden+border-radius的组合渲染偶有 bug，可加-webkit-mask兜底（仅必要时）
兼容旧浏览器要慎用百分比和简写
IE9+ 支持 border-radius，但部分老版本对百分比值或单侧写法（如 border-top-left-radius）支持不稳定。
立即学习“前端免费学习笔记（深入）”；
- 优先用像素值（如
8px），避免10%这类相对单位在低版本中失效 - 不要依赖
border-radius: 4px / 8px这种椭圆语法（水平/垂直半径分开），IE 不支持 - 如果必须兼容 IE8 及更早，只能用图片或 SVG 替代，纯 CSS 圆角无法实现
和 box-shadow 一起用时注意层级与渲染
给圆角矩形加阴影很常见，但阴影默认是直角的，不会跟着圆角走——其实它会，只是需要确保没有其他样式干扰。
- 只要没设
overflow: hidden，box-shadow天然跟随border-radius的形状 - 如果用了
transform: scale()或filter: drop-shadow()，可能破坏圆角阴影的平滑度 - 在高 DPI 屏幕上，极小的圆角（如
1px）加阴影可能看起来发虚，建议最小用2px
