Box Shadow inset无法从Photoshop重新创建

时间:2012-05-11 01:15:33

标签: html css html5 css3

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

enter image description here

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

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

3 个答案:

答案 0 :(得分:2)

你在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/

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

如果要重现的是设备上的白色高光,请尝试使用透明的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;
 }