HTML中如何使用border-radius创建圆角和圆形-html教程-PHP中文网

直接写border-radius: 10px即可生效，但需确保元素有明确宽高、非内联显示（如设display: inline-block）、有背景或边框，否则圆角不可见；正圆须宽高等值且border-radius: 50%。

html中如何使用border-radius创建圆角和圆形

border-radius 值怎么写才生效

直接写 border-radius: 10px 就能加圆角，但效果取决于元素是否有边框、背景或内容——如果元素是空的、没有 width/height、或者被父容器塌陷了，圆角会“看不见”。常见错误是给一个只有文字的加 border-radius 却没设 display: inline-block 或 padding，结果毫无反应。

真正起作用的前提是：元素得有可渲染的“块状区域”。推荐做法：

确保元素有明确的 width 和 height（或由内容+内边距撑开）
避免用在默认 display: inline 的标签上，除非同时设置 display: inline-block 或 display: inline-flex
若背景色没铺满，检查是否漏写了 background-color 或被透明背景误导

用 border-radius 实现正圆的关键条件

正圆 ≠ 任意圆角，它要求宽高严格相等，且 border-radius 必须设为宽度的一半（或直接用 50%）。很多人写 border-radius: 50% 却得到椭圆，就是因为容器宽高不一致。

正确做法很简单：

设 width 和 height 相同（比如都为 80px）
写 border-radius: 50%（推荐）或 border-radius: 40px（数值需精确匹配半宽）
加上 background-color 或 border，否则纯透明看不出来

示例：

.circle {
  width: 80px;
  height: 80px;
  background-color: #007bff;
  border-radius: 50%;
}

border-radius 四个角分别控制的写法

单值如 border-radius: 12px 是四角统一；要差异化，就得用多值语法。顺序是顺时针：左上、右上、右下、左下。漏写后面值会自动补全——border-radius: 10px 5px 等价于 10px 5px 10px 5px；border-radius: 10px 20px 30px 等价于 10px 20px 30px 20px。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

更灵活的是用斜杠分隔水平/垂直半径，实现椭圆角：border-radius: 10px / 5px 表示所有角横向圆角 10px、纵向 5px；border-radius: 20px 10px / 5px 15px 则按顺序分别指定每角的横纵半径。

注意：斜杠语法在旧版 Safari（≤ iOS 8）里支持不稳定，生产环境慎用复杂组合。

为什么 border-radius 在图片或 iframe 上有时无效

直接对或设 border-radius 通常能生效，但有两个典型失效场景：

overflow: hidden 缺失：当父容器没有限制溢出（比如外层 div 没设 overflow: hidden），圆角裁剪可能被“撑开”显示出来
图片本身带固有比例且容器未约束：比如，若父容器高度不定，图片拉伸后宽高不等，50% 就变成椭圆
某些 iframe（尤其跨域）受浏览器安全策略限制，圆角可能被截断或渲染异常，稳妥做法是包一层 div 并设 overflow: hidden