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 宣言にスプレッド半径がありません。つまり、次のようになります (それぞれのボックス シャドウ定義に新しい「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

再現したいのがデバイスの白いハイライトである場合は、透明な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;
 }

Answer 3

画像から、あなたが望むのは実際には影ではなく、グラデーションであるように見えます.

グラデーションに関する良い情報: http://davidwalsh.name/css-gradients