html - 图像周围的圆形发光效果

Question

我正在尝试在图像周围创建发光效果，但我得到了不必要的边距。有人能告诉我如何删除它吗？这是 fiddle - https://jsfiddle.net/q2gv5oka/ ，将鼠标悬停在图像上以查看边距。

<div id="play"></div>

下面是我的CSS

#play {
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    z-index: 10;
}

#play:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 30px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}

Answer 1

#play 的高度和宽度设置为 70 像素。将其设置为图像的宽度和高度，在本例中为 62px。

编辑:同样正如 Nick Coad 在评论中提到的，您的边距现在将设置为 -31px 而不是 -35px。

#play {
    background: url('http://i.imgur.com/L1lIMUb.png') center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    z-index: 10;
}

#play:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 30px;
 -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}

    <div id="play"></div>