jquery - jQuery Mobile listview 边框半径和边框

Question

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

我使用的 CSS 覆盖规则是这样的：

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

如何使图像也具有边框半径，因此它不会与边框重叠？

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/