html - 通过css模糊图像上的边框

Question

我正在尝试做这样的事情：

我认为可以使用背景图像和其上方具有透明中心的另一个图像（蒙版）来完成。但是纯CSS可以做同样的事情吗？

Answer 1

虽然您不能将 abox-shadow直接应用于图像，但您可以将其应用于:before or :after

    .shadow
    {
        display:block;
        position:relative;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
    
    .shadow:before
    {
        display:block;
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
        -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
        box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1);
    }

        <div class="shadow">
                <img src="http://lorempixel.com/400/200/" />
        </div>

Answer 2

是的，有可能是这样的：

.img {
border:1px solid black;
}
.img:hover {
border: none;
box-shadow: 0 0 10px black inset;
}