在html css中为圆形png添加轮廓

Question

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

http://oi45.tinypic.com/n6uo8o.jpg

我无法在图片本身中执行此操作，因为我希望以后能够使用悬停效果。 请帮忙！感谢。

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;
}

http://jsfiddle.net/ue9sG/

Answer 2

您可以使用CSS创建循环元素，如下所示：

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  border:1px solid #000;
}​

宽度和高度可能会有所不同但应该相互相等才能使用border-radius:50%;，或者您需要根据需要更改border-radius属性[如OP的答案]。< / p>

这是一个有效的JSFiddle

另外，要了解有关CSS圈子的更多信息，请点击此link

Answer 3

将border-radius属性应用于相关对象。

属性语法：

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

示例：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

详细了解border-radius属性here。