HTML怎么做圆角Token_html圆角Border Radius Token【完整版】-html教程-PHP中文网

使用css的border-radius属性可实现html元素圆角，支持像素、百分比等单位及四角独立设置；50%在正方形上生成正圆，需配合overflow:hidden防止内容溢出。

html怎么做圆角token_html圆角border radius token【完整版】

HTML 本身不支持圆角，必须靠 CSS 的 border-radius 实现；所谓 “Token_html 圆角” 并非标准概念，大概率是设计系统里对 border-radius 值的命名抽象（比如 radius-sm、radius-lg），本质仍是 CSS 类或 CSS 变量控制。

怎么用 `border-radius` 给 HTML 元素加圆角

直接在元素上写内联样式或加 class 即可生效，不需要额外 HTML 标签或属性：

<div style="border-radius: 8px;">我有圆角</div>
<button class="btn btn-primary">我也圆</button>

注意：border-radius 是 CSS 属性，不是 HTML 属性；它作用于任何有盒模型的元素（div、button、img、span 等），但对纯文本节点或无宽高的空元素无效。

单值写法（如 border-radius: 6px）表示四个角等半径
双值写法（如 border-radius: 4px 8px）表示水平/垂直方向分别应用
四值写法（如 border-radius: 2px 4px 6px 8px）按顺时针顺序：左上、右上、右下、左下
支持单位：px、rem、%（百分比基于元素宽高，慎用于宽高不固定的容器）

为什么设计系统要用 “Token” 管理圆角

避免散落在各处的魔法数字（比如 2px、4px、12px 随意混用），统一维护和主题切换。实际就是用 CSS 类或 CSS 自定义属性封装值：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}

.card {
  border-radius: var(--radius-md);
}

.btn-round {
  border-radius: var(--radius-full);
}

常见坑：

类名 token（如 radius-sm）没配全局样式表 → 圆角不生效
用了 % 单位但父容器宽高不定（比如 flex 子项未设 min-width）→ 圆角塌缩或异常
给 img 加 border-radius 但没设 overflow: hidden → 图片溢出圆角边界（需父容器裁剪）

哪些元素加圆角容易出问题

不是所有元素加了 border-radius 就“看起来圆”：

input[type="text"]：默认有 UA 样式干扰，建议重置 border 和 outline，再设 border-radius
select：部分浏览器（尤其是 Safari）对原生下拉箭头不响应 border-radius，需用 appearance: none + 自定义箭头
带 box-shadow 的元素：阴影不会自动按圆角裁剪，需配合 overflow: hidden 或用 filter: drop-shadow()
内联元素（如 span）：默认无宽高，border-radius 无效，得先设 display: inline-block 或 display: inline-flex