HTML中如何使用border-image设置图片边框-html教程-PHP中文网

必须配border-width才生效，最小配置为border（或border-width+border-style）+border-image-source+border-image-slice；仅写source或slice无效，border:none或缺width/style均导致失效。

html中如何使用border-image设置图片边框

border-image 必须配 border-width 才生效

只写 border-image-source 或只写 border-image-slice，边框根本不会显示——浏览器直接忽略。真正起作用的最小配置是：border（或 border-width + border-style） + border-image-source + border-image-slice。

常见错误：

border: none 或 border: 0：彻底关闭边框渲染通道，border-image 失效
border: solid 不写宽度：CSS 规范要求 width 不能为 auto 或 missing，必须有明确像素值（如 20px）
用 transparent 颜色时漏掉 border-style：只写 border: 20px transparent 不合法，应写成 border: 20px solid transparent

border-image-slice 数值必须 ≤ 图片尺寸

border-image-slice 按像素切图，四个值（上右下左）任意一个超过原图对应方向的尺寸，整个边框就会退化为纯色 fallback（通常是 border-color 或透明），控制台也不报错，极难排查。

实操建议：

先用图片编辑器量一下素材尺寸，比如 frame.png 是 120×120px，那 border-image-slice: 30 安全，border-image-slice: 50 就可能出问题
切图值不带单位默认是 px，写成 border-image-slice: 30px 反而会失效（CSS 规范不支持带单位）
如果图带内边距或透明区域，切多了会把内容区误当边框；切少了会导致角落拉伸变形或拼接缝隙

border-image-repeat 推荐用 round 而非 stretch

border-image-repeat: stretch 容易让边框边缘拉糊、失真，尤其文字按钮附近；round 会自动缩放平铺单元以填满边长，视觉更稳定，适配不同宽高元素。

使用场景差异：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

repeat：适合规则几何纹样，但需注意边缘对齐，否则出现错位白缝
round：推荐用于大多数图案边框（如花边、徽章、手绘框），自动适配无撕裂
stretch：仅在明确需要单次拉伸且图像本身足够高清时考虑，慎用

示例：border-image: url("frame.png") 30 round / 20px —— 这里 / 20px 是 border-image-width 的简写，等价于 border-image-width: 20px。

跨域图片和本地文件协议限制

开发时用 file:// 协议打开 HTML，或图片资源跨域未配 CORS，border-image-source 会静默失败：边框不显示，控制台通常没报错，只有 Network 面板能看到 403 或 blocked 调用。

验证方法：

把图片转成 data URL 直接嵌入（适合小图）：border-image-source: url("data:image/png;base64,iVBOR...");
改用本地服务器（如 python3 -m http.server）访问页面
检查图片响应头是否含 Access-Control-Allow-Origin: *

这个限制不像标签那样有 fallback 提示，容易卡在“为什么明明路径对就是不显示”。