index.html中怎样制作圆角矩形

用border-radius可直接为HTML块级元素（如div）设置圆角，支持像素值（如12px）、百分比（50%生成正圆或椭圆）及四角独立设置（如8px 16px 8px 16px），需配合overflow:hidden裁剪内容，注意兼容性与box-shadow协同渲染。

用 border-radius 直接设置圆角

HTML 本身不提供“画矩形”的能力，所谓圆角矩形，实际是用 CSS 给一个块级元素（比如 <div>）加圆角边框。核心就是 border-radius 这个属性，它控制边框圆角的曲率半径。

最简做法：在 index.html 的 <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> 或绝对定位的图标）跑出圆角范围，得手动加 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

圆角看着简单，但真正在项目里调到边缘不溢出、阴影不生硬、缩放不糊、老浏览器不崩，每个细节都得动手试一遍。