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聲明中的傳播半徑。也就是說，它應該更多的東西像這樣（請注意，在每個盒子陰影的定義有一個新的「20像素」號）：

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