box-shadow 可替代 border 实现无缝融合：用 inset 0 0 0 2px #333 配合 overflow: hidden；背景图延伸用 padding+负 margin+background-size 调整；:focus 状态用 box-shadow 模拟 outline；高精度需求可用 SVG 边框内联。
用 box-shadow 替代 border 实现无缝融合
纯 border 本质是独立于背景绘制的层，必然存在像素级分界；而 box-shadow 是基于元素内容区域向外投射的视觉效果，天然与背景色/渐变/图片共存于同一渲染上下文。关键在设为内阴影 + 零偏移：
box-shadow: inset 0 0 0 2px #333;
这样既保留“边框”视觉，又不会切断背景延续性。注意：必须配合 overflow: hidden 防止内阴影溢出，且不能和 border-radius 混用（否则内阴影圆角会滞后于背景圆角）。
背景图延伸到边框区域：用 background-clip + padding
当背景是图片或复杂渐变时，border 区域默认是透明的，导致割裂。解决思路是让背景“撑满”到边框内侧边缘：
background-clip: padding-box;
但这只是默认行为；真正起作用的是把边框“吃掉”——给元素加 padding，再用负 margin 抵消布局影响，最后把背景图尺寸设为 cover 或精确计算：
padding: 2px; margin: -2px; background-size: calc(100% + 4px) calc(100% + 4px);
适用于需要保持视觉厚度但不希望边框遮挡背景细节的卡片类组件。
outline 在聚焦态下避免破坏融合效果
交互中常需 :focus 边框提示，但 outline 默认画在边框外，直接破坏融合。正确做法是：禁用原生 outline，改用 box-shadow 模拟，并确保其扩散半径与模糊值匹配背景过渡：
input:focus { outline: none; box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.3); }
注意透明度要足够低，否则像蒙了一层膜；若背景是深色，需同步调整 rgba() 中的 alpha 值，而非只调颜色。
SVG 边框作为背景一部分嵌入 HTML
当融合要求极高（如动态渐变边框、不规则形状），CSS 已力不从心。此时把边框写进 SVG 的 fill 或 stroke 直接复用页面渐变定义：
再通过 background-image: url("data:image/svg+xml,...") 内联使用。难点在于 SVG 尺寸缩放与容器对齐，务必设 viewBox 并禁用 preserveAspectRatio 干预。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是设备像素比：高 DPI 屏幕下，1px 边框实际占 2 物理像素，而 box-shadow 的 0 0 0 1px 会被浏览器四舍五入为 0 或 2，导致虚实不一。真要保精度，得用 transform: scale(0.5) 配合 transform-origin 手动控制，但代价是文本模糊——这事没银弹，得按场景权衡。