使用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