Box Shadow inset无法从Photoshop重新创建

Question

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

你看到中心有漂亮的白色效果，我试图重新创建，但是这里没有成功就是我的代码：

  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);
  }

Answer 1

你在CSS声明中缺少一个传播半径。也就是说，它应该看起来更像这样（请注意，在每个box-shadow定义中都有一个新的“20px”数字）：

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

我还在JSFiddle中做了一个快速模型，你可以在这里看到它： http://jsfiddle.net/ZEuZ6/

Answer 2

从图像看，它看起来像你想要的不是真正的阴影，而是渐变。

有关渐变的一些有用信息：http://davidwalsh.name/css-gradients

Answer 3

如果要重现的是设备上的白色高光，请尝试使用透明的PNG来实现效果，并将其绝对放置在设备图像的顶部。

示例如下所示

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

CSS：

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