CSS图像边框翻转效果而不调整图像大小？
Posted
技术标签:
【中文标题】CSS图像边框翻转效果而不调整图像大小？【英文标题】：CSS image border rollover effect without resizing image? 【发布时间】：2013-10-19 23:09:48 【问题描述】：我几乎不敢问这个问题，因为它看起来很明显，但我就是找不到明确的答案，所以冒着玷污我不存在的声誉的风险，这里是：
有没有办法在悬停时向图像添加扩展的 CSS 内边框，而不影响图像的大小？
这是我自己的代码，尽可能接近：
CSS
*
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
.media_item_container img
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
.media_item_container img:hover
border: 10px solid #00205f;
.media_item_container a
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
.media_item_container a:hover
color:#fff;
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
</body>
http://jsfiddle.net/aKedV/
只是试图确定是否有任何方法可以做到这一点，而不会随着边框尺寸的增加而缩小图像（我基本上明白为什么会发生这种情况，只是我自己似乎无法提出解决方案）。
当我问是否有办法做到这一点时，我应该澄清一下，我认为一定有办法做到这一点，但我很想知道是否有相对简单的方法。
非常感谢！
【问题讨论】：
喜欢这个？ jsfiddle.net/aKedV/2 ... 还是这样的？ jsfiddle.net/mVaXJ 谢谢 Josh，但我实际上希望它是一个内边框......除非我看到的东西与你不同，否则你发布的 Fiddle 添加了一个外边框，当它移动页面内容时被鼠标悬停。 谢谢！你知道什么......我问了一个愚蠢的问题得到了积分：P 设置图片为CSS背景，边框不影响。 【参考方案1】：您可以使用轮廓代替边框。
outline:3px solid red;
outline-offset:-3px; //keeping it inside
悬停时
outline:10px solid red;
outline-offset:-10px;
Fiddle
【讨论】：
这也很好用！我只需将每个偏移量减少一个像素，以使边框正好靠在边缘上。谁知道这很容易......所以规则！ @ElliottSamuelLemberger：你还在寻找使用边框吗？ 谢谢 Lokesh。这个答案和下面 Donte 的答案都可以实现这一目标。 @ElliottSamuelLemberger 我的回答 Elliott 有什么问题吗？ 不，就像我在上面评论的那样很棒。再次感谢！【参考方案2】：伙伴这是我想出的解决方案。不得不更改一些 HTML 和 CSS，但这是我的尝试。希望这有助于交配，干杯
http://jsfiddle.net/aKedV/3/
HTML：
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#">
<div class="border" style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">
</div>
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
CSS：
.border
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-kthtml-transition: all 500ms linear;
transition: all 500ms linear;
width: 158px;
height: 158px;
.border:hover
-webkit-box-shadow: inset 0px 0px 2px 10px #00205f;
box-shadow: inset 0px 0px 2px 10px #00205f;
.media_item_container a
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
.media_item_container a:hover
color:#fff;
【讨论】：
干得好！对不起，但我距离能够支持你的答案还有 3 分！看起来你是通过使用嵌入阴影做到的。我确实尝试过，但不知道为什么我不能自己让它工作......非常感谢你的帮助！这正是我想要的。 我知道这是一个额外的问题，但仍然有些相关......当文本悬停在图像上时，是否有一种简单的方法来触发图像上的悬停效果？再次感谢！以上是关于CSS图像边框翻转效果而不调整图像大小？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 GraphicsMagick 从图像中裁剪/调整背景/边框的大小