图像精灵伪造内容周围的圆形边框？

Question

即时通讯使用图像精灵与透明度，即时通讯应用于伪内容。我需要图像周围的彩色圆形边框。

这是我到目前为止有： http://codepen.io/anon/pen/bpmGaz

<div class="icon"></div> 

.icon:after { 
    content: ""; 
    display: inline-block; 
    background-color: gold; 
    background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png); 
    background-position: -129px -40px; 
    height: 100px; 
    width: 100px; 

} 

.icon { 
    margin: auto; 
    margin-top: 100px; 
    position: relative; 
    width: 100px; 
} 

.icon:before { 
    content: ""; 
    display: inline-block; 
    background: gold; 
    position: absolute; 
    top: -50px; 
    left: -50px; 
    width: 200px; 
    height: 200px; 
    z-index: -1; 
    border-radius: 100%; 
} 

但是我需要它看起来像这样：

我可以用附加做到这一点伪内容（见下文），但代码变得有点混乱。有没有更简单的方法来做到这一点？

http://codepen.io/anon/pen/VaEwQy

.icon:after { 
    content: ""; 
    display: inline-block; 
    background-color: gold; 
    background-image: url(http://orig00.deviantart.net/1110/f/2014/143/9/b/mega_man_hd_sprites__transparent_background__by_lunodevan-d7jgruq.png); 
    background-position: -129px -40px; 
    height: 100px; 
    width: 100px; 

} 

.icon { 
    margin: auto; 
    margin-top: 100px; 
    position: relative; 
    width: 100px; 
} 

.icon:before { 
    content: ""; 
    display: inline-block; 
    background: gold; 
    position: absolute; 
    top: -50px; 
    left: -50px; 
    width: 200px; 
    height: 200px; 
    z-index: -1; 
    border-radius: 100%; 
} 

我尝试使用outline属性然而可悲的是它不与边界半径工作跨浏览器。

Answer 1

将此代码添加到您的伪元素，似乎这样的伎俩：

border: 50px solid gold; 
border-radius: 100%; 

http://codepen.io/anon/pen/aNRzmE