html - 如何在 "round"div 上获得圆形悬停？

Question

我想知道是否有任何方法可以使 div 看起来像圆形。

我试过:

img {
    width: 350px;
    border : 2px solid red;
    border-radius: 175px;
}

img:hover {
   border-color : blue;
}

但当我进入正方形区域 (350x350) 时出现蓝色边框

编辑:此代码适用于 Firefox，但不适用于 Chrome。

Answer 1

Working Fiddle

img {
width: 350px;
border : 2px solid red;
-webkit-border-radius: 175px;
-moz-border-radius: 175px;
border-radius: 175px;
height:350px;
}
img:hover {
border-color : blue;
}