我們如何在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

回答