加号最稳画法是用::before和::after分别绘制横竖两条等长矩形，父元素设position: relative，伪元素用top: 50%; left: 50%; transform: translate(-50%, -50%)精准居中，线宽用固定值如2px，颜色统一用background-color。
用 ::before 和 ::after 画加号，最稳也最常用
加号本质是两条垂直居中的等长矩形，“横”用 ::before 的 border-top 或 width/height 实现，“竖”用 ::after 的 border-left 或 height 实现。关键不是“怎么画”，而是“怎么精准居中”：
- 父元素必须设
position: relative，否则伪元素的absolute会脱离上下文 - 居中靠
top: 50%; left: 50%+transform: translate(-50%, -50%)，比用margin反向偏移更可靠（尤其在响应式场景下） - 线宽建议用固定值（如
2px），避免用em或rem导致粗细随字体缩放失真 - 颜色统一用
background-color而非color，因为伪元素content: ''不继承文本色，color在某些浏览器里无效
示例（简洁可复用版）：
.icon-plus {
position: relative;
width: 24px;
height: 24px;
}
.icon-plus::before,
.icon-plus::after {
content: '';
position: absolute;
background-color: currentColor;
}
.icon-plus::before {
width: 16px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-plus::after {
width: 2px;
height: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
叉号用 clip-path 最干净，但注意兼容性断点
clip-path: polygon() 是目前单标签实现叉号最语义清晰、控制最精细的方式。它把一个正方形裁切成 X 形轮廓，不需要两个伪元素、不依赖定位偏移，也不触发重排。
- 主流现代浏览器（Chrome 55+、Firefox 54+、Safari 15.4+）支持良好；Edge 79+ 没问题，但 iOS Safari -webkit- 前缀
- 不要手写
polygon()坐标 —— 容易错位，推荐用在线工具生成（如 Clippy, CSS-TRICKS clip-path generator） - 若需适配老版本 iOS，备选方案是双伪元素旋转：一个
::before水平，一个::after顺时针旋转 45deg 再加transform: rotate(90deg)得另一斜线，但会多一次重绘 -
clip-path的坐标单位是百分比，所以父容器尺寸变化时图标自动缩放，这点比 outline-offset 方案强得多
示例（兼容处理版）：
.icon-cross {
width: 24px;
height: 24px;
background-color: currentColor;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
别碰 outline-offset 画加号，除非你明确要兼容 IE
用负 outline-offset 把 outline “压”成加号，原理是利用 outline 绘制在 border 外围的特性，再往内拉到只剩十字交叉部分。听起来巧妙，实际问题一堆：
- 必须是正方形容器，且
outline-width和outline-offset的负值之间有严格数学关系：outline-offset≈-(width / 2 + outline-width / 2)，稍一变动就变形 - 不同浏览器对
outline渲染精度不一致，Chrome 下可能刚好，Safari 下边缘发虚或错位 - 无法单独控制横/竖线长度或圆角，所有线条强制等宽、无端点修饰
- 该方案在 Firefox 中已被标记为“非标准行为”，未来可能被弃用
结论：它是个奇技淫巧，不是生产方案。只有当你维护一个必须跑在 IE11 且不能引入伪元素的老系统时，才值得临时一试。
颜色和尺寸控制，统一用 currentColor 和 font-size
让图标真正“可配置”的核心，不是写死 px，而是建立与上下文的继承关系：
- 所有图形颜色一律用
background-color: currentColor，这样父元素设color: red，图标自动变红，hover 时改 color 就能联动变色 - 尺寸控制交给
font-size：把图标容器设为display: inline-block，再用em单位定义宽高（如width: 1.5em; height: 1.5em），外部改font-size: 20px就整体缩放 - 避免用
transform: scale()控制大小 —— 它会模糊像素边界，尤其在 Retina 屏上明显；而基于 font-size 的 em 缩放是整像素对齐的 - 如果图标要响应式（比如移动端变小），直接在媒体查询里改父级
font-size，所有图标同步响应，不用重复写断点
真正难的不是画出形状，而是让这个形状在按钮里不突兀、在暗色模式下不翻车、在缩放时不变糊、在 focus 状态下有明确视觉反馈 —— 这些细节，全藏在 currentColor 和尺寸单位的选择里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
