使用 Box Shadow 和 Border 自定义 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-has-thumb 添加到 <li> 元素，以便将填充添加到左侧，为图像留出空间。然后用容器包围图像并为其应用一个类（在我的示例中为 page-curl）。然后添加页面 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