在html css中为crcular png添加一个大纲

Question

嘿伙计们,我想在这个圆形的png周围添加一个4px的白色圆形边框.

我无法在图片中做到这一点因为我想要稍后悬停效果.请帮忙!谢谢.

Answer 1

HTML:

<img src="http://oi45.tinypic.com/n6uo8o.jpg" alt="" />

CSS:

img {
width:180px;
height:180px;        
border:2px solid red;
border-radius:90px;   
}

这个CSS在"面部"和边框之间没有空白区域:

img {
width:180px;
height:180px;        
border:5px solid red;
border-radius:90px;
background:red;
}