4

CSSの説明がやや不正確だbox-shadowと思います。-moz-box-shadown

http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-box-shadow

3 番目の長さはぼかし距離です。負の値は使用できません。ぼかし値が 0 の場合、影のエッジはシャープになります。それ以外の場合、値が大きいほど、影のエッジがぼやけます。

4 番目の長さは広がり距離です。正の値を指定すると、影の形状は指定された半径だけ全方向に広がります。負の値を指定すると、影の形状が収縮します。

4 番目の長さが同じ色 (最も暗い色合い) を使用し、指定された幅に対してそれを繰り返すというのは本当ですか? スムーズにぼやけませんか？

ぼかし率やフェードアウト率の指定は実現できるのか…？

誰かが正確にどのように機能するかを正確に知っていますか?

4

2 に答える 2

4

ボックスの影が、指定された影の色 (議論のために黒とします) の、コンテンツと同じサイズのボックスとして始まると想像してください。

このボックスは、コンテンツと同じサイズと形状で始まり、すぐ後ろにあるため、本質的には見えません。

2 つの距離値は、コンテンツの背後から「のぞく」ように、上下左右にシフトします。この時点では、中身と同じサイズのボックスのままで、エッジが鋭くなっています。

スプレッド値により、このボックスが指定された量だけ拡張されます。したがって、コンテンツ ボックスよりも大きくまたは小さくなります。視覚的には、スプレッドが大きいほど、影が「奥」に表示されます (ボックスが影を落としているサーフェスから遠く離れているように見えます)。

ぼかし値は、エッジを背景に滑らかにぼかし、影の色から背景の色にフェードします。

HTH

于 2010-11-11T09:06:26.587 に答える
2

私は Web/CSS プログラマーではありませんが、CSS のように見えるボックス シャドウ アルゴリズムが必要であり、それがどのように機能するかを調べることにしました。

以下の比較には、CSSmatic のオンライン ボックス シャドウ ツールを使用しました。

アルゴリズムには2つのステップがあるようです。

ステップ 1: ベクトル化されたスケールとシフト

示されているように、27pxCSS スプレッドインセットは、形状が27*2ピクセル単位で縮小されていることを意味します。これは、アウトライン ボックスの影 (27*2ピクセルが大きいなど) では反転されます。

水平/垂直オフセットは一目瞭然です。

ステップ 2: ガウスぼかし

歴史

Mozilla 開発者の David Baron は、CSS のボックス シャドウの実装に関する詳細な記事をここに書いています。

2011 年までは、CSS ぼかし半径の標準的な意味はありませんでした。これは、さまざまな Web ブラウザーのさまざまなアルゴリズムとパラメーターに対応している可能性があります。

異なるブラウザは、歴史的に同じぼかし半径に対して異なることを行ってきました。これは、ぼかしアルゴリズムと、そのアルゴリズムにとって半径が何を意味するか (つまり、特定の半径がどのようにぼやけるか) の両方の観点からです。.... 過去 1 年間で、CSS と HTML の仕様が変更され (CSS の場合)、このぼかし半径の意味を定義するか、(HTML の場合)、この定義について互いに一致するようになりました。

moz-これらの歴史的な違いは、プレフィックス（あなたが言及した）とプレフィックスの目的を説明できwebkit-ます。これらは、Mozilla およびWebKitベースのブラウザーが使用する代替の box-shadow パラメーターを指定する可能性があります。

標準化により、これらのプレフィックス付きのバージョンは現在非推奨になっていると思いますが、古いブラウザーとの互換性のために使用される可能性があります。

標準化

Baron によると、ボックス シャドウのぼかし半径の正確で標準的な定義が存在するようになりました。

ぼかし効果は css3-background と HTML によって定義され 、標準偏差 (σ) が指定されたぼかし半径の半分に等しく、妥当な近似誤差が許容されるガウスぼかしになります。

数学者はそれを正確な式に拡張できます。

視覚的な近似

GIMPでいくつかの試行錯誤を行った結果、CSS のぼかしパラメーターを 5/3 (1.6666...) で乗算し、最も近い整数に切り上げて取得したガウスぼかし半径が、非常に近い視覚的近似値を生成することがわかりました ( Firefox 50 の CSS に):

7pxCSS ぼかし (Firefox 50) ~~ ceil(7 * 5/3.0) = 12.0GIMP のガウス半径

30pxCSS ぼかし (Firefox 50) ~~ ceil(30 * 5/3.0) = 50.0GIMP のガウス半径

75pxCSS ぼかし (Firefox 50) ~~ ceil(75 * 5/3.0) = 125.0GIMP のガウス半径

実装

Ivan Kuckir は、いくつかの高速なガウスぼかしアルゴリズムを共有しています。

于 2016-12-25T16:09:30.680 に答える