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

Question

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

我无法在图片本身中执行此操作，因为稍后我想要悬停效果。请帮忙！谢谢。

score 5 · Accepted Answer

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

score 2 · Accepted Answer

将该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 属性的更多信息。

score 2 · Accepted Answer

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

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

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

这是一个有效的JSFiddle

要了解更多关于 CSS 圆圈的信息，请单击此链接

3 回答 3