html - Boxshadow 插图无法从 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;
 }