css - JQuery Mobile - Listview - Round Image Thumbnails

Question

Anyone know how to make the thumbnails in JQuery Mobile's Listview widget completely round? The images are uploaded as square images and I'd like to avoid re-processing them as round, server-side.

Thanks a bunch!

Answer 1

除了从父元素继承它们的值border-radius之外，border-top-left-radius还给图像一个类和覆盖。border-bottom-left-radius

演示

.image {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
}