Html Boxshadow嵌入式罐'；不要从Photoshop中重新创建

所以，这里是它需要的样子

你可以看到中间的白色效果，我试着重新创建，但没有成功，下面是我的代码：

  article .txt:after{
    position:absolute;
    content:'';
    width:50px;
    height:50px;
    top:50%;
    left:35%;
 -webkit-box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1);
    -moz-box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.1);
  }

---

CSS声明中缺少扩展半径。也就是说，它应该看起来更像这样（注意，在每个框阴影定义中都有一个新的“20px”编号）：

我还在JSFIDLE中做了一个快速模型，您可以在这里看到：

---

从图像上看，你想要的不是真正的阴影，而是渐变

---

关于渐变的一些好信息：

如果您想在设备上重现白色高亮显示，请尝试使用透明PNG来实现效果，并将其绝对放置在设备图像上方

下面是一个例子

<figure class="frame">
    <img src="mobile-device.jpg" />
</figure>

<figure class="frame">
    <img src="mobile-device.jpg" />
</figure>

.frame { display: block; position: relative; }
.frame:after {
    display: block;
    content: "";
    background: url('highlight.png');
    width: xx;
    height: yy;
    top: 0; left: 0;
 }