这是一篇由 Robin Thrift 撰写的客座文章，他联系我提供了一些创建此效果的演示代码。我们一起将其变成了一个 jQuery 插件。尽情享受吧！
我在浏览 ActiveDen 上的一些 Flash 模板时，偶然发现了一个我在 Flash 网站画廊中经常看到的特效。这是一个非常简单但很巧妙的效果。图像有边框，但与 CSS 边框不同，它覆盖了图像的一部分。我想在我的一个画廊中使用此效果，所以我继续进行了一些实验，并想出了以下 jQuery 插件。它基本上用与图像相同尺寸的 <div> 包裹图像，并将溢出设置为隐藏。然后它在图像之后追加另一个 <div>，实际的边框分配给它。所有边框属性都可以由用户更改。它几乎适用于任何灯箱（已测试 colorbox）。
通过组合效果，可以实现新的效果，我注意到，当使用较高的“内嵌”值时，它在 iPhone 的网页浏览器上提供了非常好的效果。随意使用此插件。
它是如何工作的！
非常感谢 Chris 编辑和优化插件，尤其感谢他发布这篇文章！
非常好的作品，谢谢，我将添加到我的页面
不错的插件，谢谢 Chris！
仅仅…为什么？
这样图像就可以拥有内嵌边框，并在您悬停时淡出，这是 CSS 做不到的效果。或者您是否已经发现这种效果不适用于世界上每个网站？
这是一个非常棒的效果，尽管我可能会使“边框”透明，以便仍然可以看到大部分图像。
一如既往地对这个例子的理解非常强大和深刻。
谢谢 Chris。
此外，您的演示页面看起来很棒。
也许还需要提一下，我之前没有意识到这是一篇客座作者的文章，上面的简短说明直到我回到此页面才被注意到。
感谢 Robin 的文章。
我喜欢这个效果，并且始终支持 JQuery..谢谢…
您总是能够发布我当前项目所需的恰好内容。
如果边框可以稍微透明一点，这样您就可以看到图像的一部分，那将非常酷。我还没有见过这样做的（即使使用 css3），但也许可以？使用 css3 的 border-image 和 .png？
您可以将追加的 div 的不透明度设置为 .9 或其他值。
div.ibe_inner { opacity: .5 !important; }
div.ibe_inner { opacity: .5 !important; filter: alpha(opacity = 50); /* ie only */}
您也可以为动画 div 设置背景，因此使用不透明的 png，您可以实现相同的效果。但是，我完全同意 Alistair 的观点，在这种情况下使用 CSS 可能更好，因为您不需要担心内部的文本（在这种情况下，您也可以使用 rgba）。
哎呀，我为什么没想到呢…
这是实际应用（最后我放弃了透明度）
不多，但在一个非常基本的网站上是一个不错的效果。
使用 Overflow hidden 进行遮罩的技巧不错 :-)
哇，很整洁，很不错，就像最终结果 [演示页面] 一样，我将在未来的项目中使用它，感谢分享！:)
不错的效果
刚刚修改了演示以添加一个新效果：左右、顶部、底部的内嵌尺寸不同。
“大边框”示例让您显示“只是一个细节”，但细节位于中心。通过这种小修改，您可以选择所需的细节。
演示：http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect/index.html（只是在原始演示中添加了“未居中”部分。
压缩包：http://dl.dropbox.com/u/394017/csstricks/InsetBorderEffect.zip
而且我不关心再许可，所以原始许可证适用（所有功劳归原始作者 http://rob-thrift.com，对于他所做的事情，我不在乎任何人为我的部分给予我功劳）
聪明！我将仔细检查并有机会时将其整合进来。
非常棒的效果。
为用户提供了一点交互性，让他们知道元素在悬停时“会做些什么”。
非常感谢分享！=)
Chris
我喜欢这个效果，我决定将我的网站图片放到这个效果中！
嘿，Chris，
非常棒的效果，感谢分享，这肯定会在一段时间内取代我图像上的 CSS 精灵！不久之后我就会用 jQuery 构建一个完整的网站。
大边框在相同颜色的背景上看起来很棒，有点像缩略图效果。可能会尝试不同的过渡效果，但淡出效果确实非常不错。
感谢分享。
我喜欢缩略图的想法。也许，如果您将此效果与图像的一些调整大小结合起来，获取顶部和左边的偏移量，将其绝对定位，然后使整个内容变大，您将获得一种很棒的小型灯箱效果。
我非常喜欢这个效果
谢谢:)
看起来我找到了使用 CSS3 的更简单的方法：您可以为图像设置轮廓（一种新的边框类型），并使用新的属性 outline-offset 和负值将轮廓放置在图像内部。加入 CSS 动画，瞧！您就得到了它！
您可以在这里查看演示 here。
我只在 Chrome 和 Firefox 上检查过，但这似乎完全一样，无需使用 JS。简单、漂亮的解决方案，Tim。
不错=)
我实际上考虑过这一点，但由于浏览器兼容性问题，并且因为我是 jQuery 的忠实粉丝，所以我决定不这样做 :)
另一个我热爱关注此博客的原因。感谢 Tim 分享。太棒了！
无价！
非常感谢 Chris :)
我从您的网站中学到了很多东西。
谢谢 Chris Coyier。
不错的效果；Robin 和 Chris 干得不错！
我现在明白了。
感谢css-tricks.com
这是一种独特的图像显示效果。谢谢。
我的评论在哪里，克里斯？
这是一个很棒的插件。我迫不及待地想看看代码！
我不确定这里是否是提出这个问题的正确地方，但我查看了代码，它很棒。我只有一个关于它的问题。你如何知道使用“mouseenter”事件？你可以使用hover()吗？
我正在使用新的 jQuery 1.4 元素创建语法，据我所知，你不能真正将“hover”用作其中的一部分。Hover 在 JavaScript 中不是一个“真实”的事件，它只是映射到 mouseenter 和 mouseleave 而已=)
你不能避免使用双div，而是使用box-sizing: border-box; 属性吗？
# -moz-box-sizing: border-box;# -webkit-box-sizing: border-box;
# box-sizing: border-box;
他们在 nettuts 上有一篇关于它的文章，看起来这将具有相同的效果，而无需额外的 div。
也许吧？我不太了解它。您可以使用上面 Tim 的示例完全避免使用 DIV。但是，使用 jQuery，它将比这两种技术都更具跨浏览器兼容性。
我刚刚使用了 Tim 的方法。请看这里
http://www.openfieldimage.com/concept
但是当您使用 Safari 时，我不喜欢图像上的细线（看起来像一个细十字）。
有人知道如何解决它吗？
您在 Firefox 中看不到这些线条。
一如既往，克里斯，这个网站具有不可思议的能力，可以使意想不到的事情发生。谢谢。此外，我敢打赌，css-tricks 拥有最好的演示页面！
听起来像是 CSS 图像库即将诞生
这太棒了，克里斯。我将把它用于我当前正在开发的主题 :)
是的，我认为这是一种普遍的效果。过去在 Flash 中疯狂地使用这种东西。
我敢说，Flash 太有趣了！
不错的效果。加上一点透明度，我认为这在艺术家的作品集网站上会很棒。嘿，有点像我目前正在做的那个……真是巧合！
不错！我将在我们的下一个项目中使用它。谢谢！
继续努力！
非常酷的效果
极好
很有趣，很花哨~
CSS3 未来可以实现这种效果。
有人在 IE 和使用此插件的可链接图像方面遇到问题吗？我将此插件应用于链接到子页面的图像，在 IE7 和 IE8 中，图像没有点击到下一页（只是停留在页面上，没有错误显示）。在其他浏览器（如 FF（Mac 和 PC）、Safari、Opera 和 Chrome）中运行良好。
看起来是阻止点击的 js 操作。
有什么想法吗？
我敢说，Flash 太有趣了！
不错！我将在我们的下一个项目中使用它。
克里斯，我只是想让你知道我认为这很棒，而且这个网站公然抄袭了你
http://www.htmldrive.net/items/show/327/Inset-Border-Effect-jQuery-Plugin.html
我取消了链接，所以他们不会获得你的任何 PageRank 属性。
使用你的确切图像等等。
您好，
我将此插件与 jQuery Cycle 结合使用。在 FF/Chrome 中运行良好，但在 IE7/IE8CMode 中表现异常。它没有很好地勾勒出图像，并且最初比图像小（留下约 1 像素的可见照片线条），然后“突然”获得正确的大小。非常奇怪和丑陋的效果。有人遇到过这种情况吗？
您好，克里斯，感谢您提供此有用的插件。我将在我的下一个项目中使用它
我意识到此优秀插件的一个变体，它提供了不同的配置选项。
我想知道你对此有何看法？
这是链接：http://loige.altervista.org/jQueryNiftyBorders/
以及 github 项目：http://github.com/loige/jQueryNiftyBorders
在 IE 中遇到了一些问题。我正在使用的效果的图像也链接到其他 URL。在 Firefox 中运行良好，但在 IE 中图像不再可点击。是否有任何解决方法？我按照说明在 img 上添加了类...
希望您能提供帮助..谢谢。
Mike