IE 上的大纲偏移替代

Question

我有类似“http://jsfiddle.net/sogpgepg/”的东西，可以在 Chrome 和 Firefox 上运行。但是我注意到偏移在 Internet Explorer 上不起作用，并且轮廓在图片之外而不是在图片内部。

经过一番研究，我发现 Explorer 不支持轮廓偏移！

有什么方法可以在 Internet Explorer 上获得相同的效果（在边框内）？

脚本：

HTML

<div id="container">
<div class="inner">
    <img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
    </div>
</div>

CSS

#container{
    width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
}

    .inner img{
            width: 100%;

            outline: 6px solid RGBa(255,0,0, 0.5);
            outline-offset: -6px;

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

        .inner img:hover {
            outline: 6px solid rgba(200,200,200,0);

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

Answer 1

这是 IE 的替代方案，如“http://css-tricks.com/”所示

代码：

<div class="inner-border">
    Transparent Inside Border
</div>

CSS

.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

JSFiddle Demo of the Above Code

这是透明内边框的另一个示例： http://jsfiddle.net/chriscoyier/DvaqK/4/

希望这会有所帮助！

Answer 2

一种可能的解决方法是使用嵌入阴影。

我稍微修改了你的小提琴。

http://jsfiddle.net/sogpgepg/1/

我所做的更改是：

1. 在.inner 上将<img> 设为background-image。
2. 将所有样式从.inner img 移动到.inner

通过将模糊半径设置为 0 并指定散布半径，您可以获得硬边“边框”。

此链接包含有关使用阴影（尤其是嵌入阴影）的更多信息：http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/

代码：

#container {
    width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
}

.inner{
    width: 300px;
    height:200px;
    background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
    box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.inner:hover {
    box-shadow: inset 0px 0px 0px 6px rgba(200,200,200,0);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}