图像中的圆角

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