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

Answer 2

我想知道是否有任何方法可以使div成为像圆形一样的行为。

答案是否定的。

HTML元素是矩形的，但可以调整为显示其他形状。

然而，有其他技巧可以达到你想要的效果，但这取决于你正确尝试做什么。

@Ruddy在他的评论中提供了一个小提琴，这可能是一个答案。

Answer 3

这就是您要搜索的内容

http://www.w3schools.com/tags/tag_map.asp

不幸的是，你无法制作一个兼容crossbrowser的圆形元素。（我认为）只有这样，带有图像地图。

<img src="http://freshwateraquaculture.net/wp-content/uploads/2014/02/300x300.gif" alt="" usemap="#Map" border="0" />
<map name="Map">
  <area shape="poly" coords="112,300,50,186,56,66,248,58,330,114,320,244,220,298" href="#">
</map>

如果您使用Google Chrome开发人员工具od＆＃39; Firebug＆＃39;等开发人员工具检查元素。你可以看到该区域有一个特殊的形式，而不是直肠。

Answer 4

最后我使用了javascript使其在Chrome中运行

$('#photo').mousemove(function (e) {
    var r = 175;

    var x = $('#photo').offset().left + r;
    var y = $('#photo').offset().top + r;

    var ex = e.pageX;
    var ey = e.pageY;

    var xx = (ex - x);
    var yy = (ey - y);

    if(xx*xx+yy*yy<r*r)
        $("#photo").css('border-color', 'red');
    else
        $("#photo").css('border-color', 'blue');
});

$('#photo').mouseleave(function (e) {
        $("#photo").css('border-color', 'blue');
});

Answer 5

选中此Demo jsFiddle

CSS

img {
    width: 350px;
    border : 2px solid red;
     /* Safari 3 to 4, iOS 1 to 3.2, Android 1.6 */
    -webkit-border-radius: 175px;

     /* Firefox 1 to 3.6 */
    -moz-border-radius: 175px;

    /* Opera 10, IE 9, Safari 5+, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
    border-radius: 175px;
}

img:hover {
   border-color : blue;
}

如何在“圆”div上获得圆形悬停？

5 个答案:

CSS