закругленные углы в изображении

Question

Я хочу отображать мои изображения с закругленными углами на веб-странице. Я хочу добавить эффект ниже на мое изображение на странице посмотреть изображение

Округлое изображение http://www.freeimagehosting.net/uploads/bc8a5a1d2c.jpg

Answer 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, поэтому он не будет работать в старых браузерах

Answer 2

плагин 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  
}); 

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 Curvy Corners , который выполняет свою работу в кросс-браузерном режиме.