自定義JQuery Mobile ListView與框陰影和邊框

Question

我想應用一個框陰影和邊框到我的圖像在JQuery Mobile ListView中。我希望結果看起來像下面的附件。我無法成功將它直接應用到img屬性。

這是我用於盒子陰影的CSS。

.effect2 
{ 
    position: relative; 
} 
.effect2:before, .effect2:after 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 
.effect2:after 
{ 
    -webkit-transform: rotate(3deg); 
    -moz-transform: rotate(3deg); 
    -o-transform: rotate(3deg); 
    -ms-transform: rotate(3deg); 
    transform: rotate(3deg); 
    right: 10px; 
    left: auto; 
} 

HTML

<ul data-role="listview" data-inset="false" data-theme="b"> 
      <li data-theme=""> 
       <a href="#history" data-transition="none" > 
       <img class="box effect2" src="img/History-thumb.jpg"/> 
        <h3>History</h3> 
        <p>A Brief History of Beaufort</p> 
       </a> 
      </li> 
      <li data-theme=""> 
       <a href="#featured" data-transition="none"> 
       <img src="img/Featured.jpg"/> 
        <h3>Featured</h3> 
        <p>Featured Local Businesses and Restaurants</p> 
       </a> 
      </li> 
      <li data-theme=""> 
       <a href="#restaurants" data-transition="none"> 
       <img src="img/FrogmoreStew-thumb.jpg"/> 
        <h3>Restaurants</h3> 
        <p>Local Restaurants and Dining</p> 
       </a> 
      </li> 
      <li data-theme=""> 
       <a href="#shopping" data-transition="none"> 
       <img src="img/Shopping.jpg"/> 
        <h3>Shopping</h3> 
        <p>Shopping in Downtown</p> 
       </a> 
      </li>  
     </ul> 

感謝，

羅伯特

Answer 1

的<img>元素不支持：before和：after在大多數瀏覽器僞元素，所以你必須使用更復雜的HTML和CSS。一種方法是在包含<div>的縮略圖周圍，並將頁面捲曲效果應用於該縮略圖。

<ul data-role="listview" data-inset="false" data-theme="a"> 
    <li class="ui-li-has-thumb"> 
     <a href="#history" data-transition="none" > 
      <div class="page-curl"> 
       <img src="http://lorempixel.com/80/80/city/1/"/> 
      </div> 
      <h3>History</h3> 
      <p>A Brief History of Beaufort</p> 
     </a> 
    </li> 
</ul> 

類UI麗具有拇指添加到<li>元件，使得填充將被添加到左邊的允許空間圖像。然後用容器對圖像進行遍歷並應用一個類（我的示例中爲page-curl）。然後添加頁面捲曲CSS：

.page-curl { 
    background: white; 
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    width: 72px; 
    height: 72px; 
    z-index: 1; 
} 
.page-curl img{ 
    position: absolute; 
    max-width: 72px; 
    max-height: 72px; 
    z-index: 2; 
} 

.page-curl:before, .page-curl:after { 
    background: none; 
    bottom: 11px; 
    -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); 
    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); 
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); 
    content: ""; 
    height: 10px; 
    left: 6px; 
    position: absolute; 
    width: 40%; 
    z-index: -1; 
    -moz-transform: skew(-4deg) rotate(-4deg); 
    -webkit-transform: skew(-4deg) rotate(-4deg); 
    transform: skew(-4deg) rotate(-4deg); 
} 

.page-curl:after { 
    -moz-transform: skew(4deg) rotate(4deg); 
    -webkit-transform: skew(4deg) rotate(4deg); 
    transform: skew(4deg) rotate(4deg); 
    left: auto; 
    right: 6px; 
} 

調整味道。

這裏是列表視圖的工作DEMO