如何为border image（边框图像）添加可点击链接？

当然可以实现，下面是两种实用的方案：

方案一：用原生<a>标签包裹（推荐，语义化最佳） #

直接将带有border-image的元素放在<a>标签内部，确保<a>的点击区域覆盖整个边框范围。由于<a>默认是行内元素，需先转为块级/行内块，再通过调整尺寸或padding匹配边框区域。

示例代码：

<a href="你的目标链接" class="border-link">
  <div class="bordered-content">这里是内容</div>
</a>

.border-link {
  display: inline-block;
  /* padding值需与border-image的边框宽度一致，确保点击区域覆盖边框 */
  padding: 12px; /* 假设border-image的边框宽度为12px */
  text-decoration: none;
}
.bordered-content {
  border: 12px solid transparent;
  border-image: url('你的边框图片路径') 20 stretch;
}

原理：外层<a>通过padding扩展点击区域，覆盖边框图像的范围，点击边框部分会直接触发链接跳转。

方案二：JavaScript绑定点击事件 #

如果场景不适合用外层<a>，可以直接给带边框图像的元素绑定点击事件，通过JS实现页面跳转，同时添加鼠标手型提示提升交互体验。

示例代码：

<div class="bordered-content" onclick="window.location.href='你的目标链接'">
  这里是内容
</div>

.bordered-content {
  border: 12px solid transparent;
  border-image: url('你的边框图片路径') 20 stretch;
  cursor: pointer; /* 鼠标移上去显示手型 */
}

关键提示 #

元素的border区域本身属于可点击范围，只要你正确设置了border的宽度（哪怕是transparent，因为border-image会替换这个样式），边框图像的位置就属于元素的点击区域，无需额外复杂操作。之前找不到方案可能是因为没设置匹配边框图像宽度的border值，导致边框图像不在元素的点击范围内。

内容的提问来源于stack exchange，提问作者Madison