jQuery Mobile listview边框半径和边框答案

【问题标题】：jQuery Mobile listview border radius and borderjQuery Mobile listview边框半径和边框
【发布时间】：2012-08-27 09:48:27
【问题描述】：

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

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

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

如何使图像也具有边框半径，使其不与边框重叠？

【问题讨论】：

标签： jquery jquery-mobile border css

【解决方案1】：

您目前无法将边框半径应用于图像，这真的很糟糕。您需要做的就是将其设置为具有边框半径的 div 的背景才能正常工作。

【讨论】：

不确定它与 jQuery Mobiles 标记的配合效果如何，但您甚至可以动态地进行。在 DOM 中搜索图像，删除它们，然后使用 jQuery 将它们作为背景图像重新应用到最近的 span。

【解决方案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/

【讨论】：

如果你把 JS 的最后一行改成thumb.hide(); 就可以了（否则右边的文字会移到图片下面）。谢谢:)
酷，是的，根据您的个人设置，可能会有所不同。