图像中的圆角答案

【问题标题】：round corners in a image图像中的圆角
【发布时间】：2019-08-04 15:08:10
【问题描述】：

我想在网页中显示带有圆角的图像。我想在页面中为我的图像带来以下效果看图

【问题讨论】：

【解决方案1】：

对于 CSS 解决方案，试试这个

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

注意： border-radius 是一个 CSS3 标签，所以它在旧浏览器中不起作用

【讨论】：

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

【解决方案2】：

您可以使用jQuery Curvy Corners plugin，它以跨浏览器的方式完成其工作。

【讨论】：

【解决方案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> 来完成。

【讨论】：

【解决方案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  
});

【讨论】：