ボックスシャドウを使って何をするか-CSSチュートリアル-php.cn

ボックスシャドウを使って何をするか

Linda Hamilton

リリース： 2024-12-29 14:29:11

オリジナル

809 人が閲覧しました

時々「CSS フェーズ」が表示されます。最新のものは、CSSBattle を発見したときに始まりました。この Web サイトには、最小限の文字数で CSS を使用して画像を再現するという課題が毎日あります。私は恐ろしく、非常に冗長ですが、夢中になったと言わざるを得ません。

私の好きなことの 1 つは、他の人のソリューションを見ることです。このようにして、他の CSS 格闘家たちがそこで box-shadow を頻繁に使用していることを発見し、それについて非常に興味を持ちました。彼らは基本的にこのプロパティを使用して、1 つの四角形を永遠に複製します。その方法を説明します。

box-shadow プロパティ

ドキュメントによると、このプロパティには多くの取り決めがあります。ただし、ここで使用するのは左上の色です。たとえば、次のようになります。

What we do with the box-shadows

(2024 年 11 月 16 日の CSSBattle の毎日の目標)

この画像には div が 1 つだけ表示されています。他のものは影です。したがって、HTML は次のようになります:

<html>
   <body>
       <div></div>
   </body>
</html>

ログイン後にコピー

CSS は次のようになります:

* {
   background: #6592CF;
   position: absolute;
 }

div {
   top: 52px;
   left: 52px;
   width: 70px;
   height: 30px;
   background: #EEB850;
   box-shadow:
       0 75px #243D83, 0 150px #EEB850,
       105px 0 #243D83, 210px 0 #EEB850,
       105px 75px #EEB850, 210px 75px #243D83,
       105px 150px #243D83, 210px 150px #EEB850;
}

ログイン後にコピー

上と左のプロパティはピクセル単位であり、距離は最初のプロパティを基準にしていることに注意してください。

私だけかもしれませんが、これはとても興味深いと思います。私は CSS の研究を続けていきます。他にも素晴らしいものを見つけたらお知らせします。

以上がボックスシャドウを使って何をするかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。