jQuery Mobile listview边框半径和边框

Question

如果我在列表视图中为缩略图设置边框半径和边框，它似乎将边框视为图片的一部分，如下所示：

我正在使用的CSS覆盖规则是：

.ui-li-thumb {
    width: 50px;
    height: 50px;
    margin: 8px;
    border: 2px solid #333 !important;
    border-radius: 10px !important;
}

如何制作图像，使图像也具有border-radius，因此它不会与边框重叠？

Answer 1

你当前无法将边框半径'应用于图像，这真的太糟糕了。您需要做的是将其设置为具有边界半径的div的背景，以使其起作用。

Answer 2

决定扩展我上面的评论，并向您展示如何动态更改使用JavaScript将图像更改为背景图像：

JavaScript的：

$('li').each(function(index) {

    // Find thumbnail image
    var thumb = $(this).find('img');  

    // Get the src
    var thumbsrc = thumb.attr('src');

    // Insert a span (absolutely positioned using below css)
    thumb.after('<span class="thumbnail" />');

    // Apply our thumbnail as a background image to the span
    $(this).find('span.thumbnail').css("background-image", 'url(' + thumbsrc + ')'); 

    // remove thumbnail image
    $(this).find('img').remove();
});  

CSS：

.thumbnail {
    width:18px;
    height: 16px;
    display:block;
    position: absolute;
    left:10px; 
    border-radius: 5px;
}​

工作示例：

http://jsfiddle.net/x54A6/1/