我们如何在html中显示图像的圈选区域？

我有一个长方形的图像。不过，我想达到最终结果如下。我们如何在html中显示图像的圈选区域？

enter image description here

我如何在CSS/JavaScript的实现这一目标？

2013-08-27 abiieez

可能是'border-radius：50％'会很有用：http://jsfiddle.net/PG656/ – Cherniv

为什么大家都发布相同的答案。是。边界半径为50％。我们懂了。所有的答案都是重复的。没有什么独特的 – MarsOne

border-radius只适用于FF，Chrome和IE 9.对于早期版本的IE，使用CSS3PIE或其他IE浏览器的渐进式行为 – Nisha

可以使用边界半径实现它：

.circle { 
    border-radius: 50%; 
    width: 200px; 
    height: 200px; 
    /* width and height can be anything, as long as they're equal */ 
}

欲了解更多信息请查看本article。

2013-08-27 06:53:16

如果你有一个img标签，不是简单地使用代码段下面，使其圆

.container_class img { 
    border-radius: 50%; 
    height: 200px; 
    width: 200px; 
}

Demo 2（有边框）

以上的例子会给你是一个完美的圆形，如height = width，如果你想要一个椭圆形状，正如你已经亲在你的问题vided，比你可以简单地增加你的img标签的width像

注：border-radius是CSS3属性，目前它是跨浏览器广泛支持，犹若IE是游戏扰流板给你，有在IE8不支持虽然可以像CSS3 Pie

2013-08-27 06:54:48

使用border-radius: 50%; polyfills。

2013-08-27 06:55:42

你在这里。

的HTML：

<img src="http://coolvibe.com/wp-content/uploads/2013/01/Portrait-Alexander-Beim-Bruce.jpg" />

的CSS：

img{border-radius:500px; border:2px solid #000000; width:200px; height:200px;}

我希望这是你在找什么。

2013-08-27 06:56:14 Nitesh

img{ 
    border-radius:50%; 
    border:1px solid #000000; 
    height:150px; 
    width:200px; 
} 
/*You can change height width*/

2013-08-27 07:03:09

回答