html - 无法从 Photoshop 重新创建 Boxshadow 插图

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 声明中缺少传播半径。也就是说，它应该看起来更像这样(注意在每个框阴影定义中都有一个新的“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/