CSS3 線形グラデーションを使用してショッピング カートの住所選択エンベロープ効果を実現する例

一部の電子商取引 Web サイトでは、アドレス選択が封筒スタイルに変更されます (個人的には非常に厳しいと感じます)。その実装を見ると、そのほとんどは 写真 に基づいています。フォームでは、最適化の考え方で、css3 線形グラデーションを使用してエンベロープ効果を実現してみます。これがレンダリングです

それでは始めましょう~

。

HTML 構造は次のとおりです:

幅: 278px; 高さ: 176px;
高さ: 176px; %;

文字にはグラデーションが書かれています-ボックスを選択し、文字の枠線が中央部分を色で覆います。

次にレターボックスのグラデーションを書きます。まず、画像の上のグラデーションを分析しましょう。白、赤、青の 3 色があります。線形グラデーションを使用する場合、最初にグラデーションの角度を定義するだけでなく、色と色の比率も定義する必要があることは誰もが知っています。色はすでにわかっているので、次はその方法について説明します。この比率を決定します。

レンダリングを観察すると、
サイクル
として赤1つ、白1つ、青1つ、白1つのパターンが見つかり、パターン番号は4で、比率は100%/(パターン番号*2)になります。 ）＝12.5％は当社比です。なぜ通常の番号 * 2 を使用するのか説明してください。通常の番号は組み合わせであるべきではないでしょうか。いいえ! 立方体の中に組み合わせの数字の色を入れて、レンダリングを作成しました

これは、大きなボックスが小さな立方体の単位で繰り返されていると考えることができます。

.letter-box{
幅: 278 ピクセル; 高さ: 176 ピクセル; g,#f25953 12.5%,#fbfaf5 12.5% ,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,# FBFAF5 50％、＃F25953 50％、＃F25953 62.5％、＃FBFAF5 62.5％、＃FBFAF5 75％、＃5590D6 75％、＃5590D6 87.5％、＃FBFAF5 87.5％、＃FBFAF5 100％）;

以上がCSS3 線形グラデーションを使用してショッピング カートの住所選択エンベロープ効果を実現する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。