javascript - 使页面上的所有链接都添加图像或效果

Question

我在 PS 中为客户演示创建了一些屏幕截图。我将主持演示并且不想使用 InvisionApp 或类似的东西。

我正在 PS 中分割图像并将正确的路径应用到链接。因为他们将在平板电脑上查看此内容，所以我想让所有链接在链接周围都有边框效果，或者可能在左上角有一个星号。这将使他们知道点击哪里。

使用 CSS 边框效果不起作用，因为它会偏移切片并导致图像移动。我需要一种在切片图像之上分层的方法。

我目前正在链接 CSS 或 JS 文件，并使用标签中的“a”轻松地将样式应用到页面。对此的任何帮助将不胜感激。

Answer 1

Photoshop 仍然将所有内容切片成表格，是吗？这可能就是为什么当你添加边框时它会导致一切都破裂。

您实际上可以为元素提供真正可以描述为内部边框的东西。这不会使盒子变大。

a {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border: 5px solid red;
}

或者你可以使用 inset box-shadow

a {
  -webkit-box-shadow:inset 0 0 0 5px rgba(0,0,0,1);
  -moz-box-shadow:inset 0 0 0 5px rgba(0,0,0,1);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,1);
}

根据口味明显改变宽度和颜色

我个人更喜欢 box-shadow。它应该与其下方的图像交互良好。