Css 图像中的圆角

我想在网页中显示圆角的图像。 我想在一个页面中给我的图像带来以下效果 看到图片了吗

---

您可以使用以跨浏览器方式完成其工作的。

对于CSS解决方案，请尝试以下方法

注意：

---

border radius是一个CSS3标记，因此它在旧浏览器中不起作用

我使用纯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>

.overlayable{position:relative；display:block；}
.overlayable span{位置：绝对；顶部：0px；左侧：0px；}

---

但是如果您愿意，也可以使用

。

jQuery插件lc_roundz将动态地完成这项工作-即使您希望角落透明（例如，用于复杂背景，…）

---

这将适用于目前可用的大多数CSS3投诉浏览器。

$("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  
});