圖像精靈僞造內容周圍的圓形邊框？

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