1

この記事http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/を何度も読みました。しかし、この場合、PSD のドロップ シャドウを CSS3 のボックス シャドウに変換する正しい方法が見つかりません。

Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow:    Angle=90 degrees; distance=1px; spread=5%; size=9px
4

2 に答える 2

2
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);

情報が不足しているため、ここで少し推測する必要がありました。色のrgba(r,g,b,a)構文は、各色コンポーネントに対して 0 ~ 255 の値を取り、色の不透明度に対して 0 ~ 1 の値を取ります。したがって、このborderルールは Photoshop のストロークに相当します。

内部グローに直接相当するものはありませんが、それをシミュレートできるインセット ボックス シャドウを作成できます。同じルールにコンマを使用して複数の影を指定すると、最初の影を挿入影にすることができます。これはinset、開始するキーワード、次に x および y オフセット (この場合はなし)、次にぼかし半径、次に拡散距離、最後に影の色で指定されます。値で遊んでください。スプレッドは9px、残りは0と推測しました。

最後に、外側にボックス シャドウを指定します。同じルールがインセット シャドウにも適用されます (これも私の推測による値です)。遊びましょう!

于 2012-07-23T22:03:56.457 に答える