圖像中的圓角

Question

我想在網頁中以圓角顯示我的圖像。 我想帶來 頁我的形象在下面看到效果的圖像

Rounded Image http://www.freeimagehosting.net/uploads/bc8a5a1d2c.jpg

Answer 1

您可以使用它的工作在跨瀏覽器的方式jQuery Curvy Corners plugin。

Answer 2

的CSS的解決方案試試這個

<img src="yourimg.jpg" style="border:1px #000 solid;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;"/>

注： 邊界半徑是CSS3標籤，所以它不會在舊的瀏覽器中工作

Answer 3

我使用的是純HTML + CSS解決方案，保證交叉瀏覽器。覆蓋。

獲取一張帶有邊框的圖片。與您想要顯示圖片透明的區域。然後將其放在正常圖像的頂部。像這樣：

.overlayable   { position:relative; display:block; } 
.overlayable span { position:absolute; top:0px; left:0px; } 

    <a href="http://link.com" class="overlayable"> 
     <img src="imageToShow.png" alt="awsome picture" /> 
     <span> 
     <img src="overlayImageWithRoundedCorners.png" alt="" /> 
     </span> 
    </a> 

但是你可以用<div>來做到這一點，如果你喜歡。

Answer 4

jQuery插件lc_roundz會動態地完成這項工作 - 即使您希望角落是透明的（例如，用於複雜背景，...）。

$("image").lc_roundz({ 
radius: 20, // corner-radius 
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original 
newid: "%oid_after_lc_roundz",  // the new ID for the canvas object. %oid will be replaced with the id of the original object 
width: -1,               // -1 uses the original image's width 
height: -1,     // -1 uses the original image's width 
replace: false,           // boolean to decide whether the original should be removed from the DOM 
corner_color: [0,0,0,0]      // this means TRANSPARENT ... R,G,B,alpha [0-255] each 
});