2

css の高度な境界線とボックス シャドウに関するチュートリアルはどこにありますか?

私はcssの形を発見しましたが、これを説明することはできません:

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }
<div id="space-invader"></div>

リンク

誰がそれがどのように機能するか説明できますか? これはすべてのブラウザに対応していますか?

ありがとう。

4

2 に答える 2

2

  1. 要素に複数のボックス シャドウを設定できます。例のように、たくさん追加することが可能です

  2. 最初の 2 つの位置の値は、親オブジェクトに関連して影を引き寄せます。これらは座標と考えることができ、各ボックスの影はブロックであり、最初の 2 つの位置の値がその座標です。

  3. 3 番目と 4 番目の位置にある 2 番目の値のペアは、影のぼかしとそのサイズを定義します。これらの両方を 0 に設定すると、影のエッジが平らになり、親要素と同じサイズになります。親要素が 1em ブロックであるため、これはシャドウが 1em ボックスを作成することを意味します

  4. 親要素に設定された 1 の em 値は、ほとんどのブラウザーで 16px の既定のフォント サイズを使用することから始まり、16px の正方形のボックスを作成します。

  5. 影はすべて 16 ピクセルの正方形で、ぼかしはなく、整数の em でオフセットされ、ブロック状の結果が作成されます。

編集例を見てみましょう。ここで、親要素のフォント サイズを変更すると、em がフォント サイズで動作するため、ブロックのサイズが変更されることがすぐにわかります。個々のボックスの影を変更することで、正方形の色を設定できることもわかります。

別のボックスは、ボックス シャドウのぼかし半径を変更してぼやけさせ、別のボックスはさらに大きくしました。このユニットでサイズの継承を示すために ems が使用されました。

最後に、ブロックが間違った座標に移動されました

#space-invader{

  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 1em 0 #5f5, /* BLURRED */
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    12em -1em 0 0 red, /* MOVED OUT OF POSITION */
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 blue, /* COLOURED */
    -4em 1em 0 0 red,
    4em 1em 0 0 blue,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 2em #666, /* MADE LARGER */
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;
font-size: 12px;

    margin: 100px;
  }
<div id="space-invader"></div>

ems についての詳細は次のとおりです 。 http://www.impressivewebs.com/understanding-em-units-css/ https://css-tricks.com/why-ems/

ボックス シャドウについての詳細: https://css-tricks.com/almanac/properties/b/box-shadow/

最後に、このコードはブラウザーでかなり安定しています。Box Shadow (接頭辞なしでも) は非常によくサポートされており、em は dot の年から存在しており、IE6 ではピクセルよりも好まれています。

于 2015-08-20T20:00:41.373 に答える
2

新しいパラメーター「...0 1em 0 1em 赤、-2.5em 1.5em 0 .5em 赤、...」を挿入すると、設定した特性で新しい影が作成されます。例を見てみましょう: 0 1em 0 1em red. 最初のパラメーターは、div に対する影の水平位置を設定します。正の値は右への増加、負の値は左への増加を意味します。2 番目のパラメーターは、垂直位置を設定します。プラスは低いことを意味し、マイナスは高いことを意味します。次のパラメータは、影のぼかし、広がり、および色です。

特定の位置に影を配置すると、任意のイメージを描画できます。

詳細については、http ://www.w3schools.com/cssref/css3_pr_box-shadow.asp を参照してください。 また、スペース インベーダーはhttp://joshnh.com/weblog/drawing-things-with-boxから入手したと思います。 -影の多い/

于 2015-08-20T20:01:51.147 に答える