CSSはコーナーカット+ボーダー+投影+コンテンツ背景色のグラデーション効果を実現します

CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーションのすべての効果を実現できます。UI には背景の切り抜きがないため、理論的には CSS で実現できると思います。

最終的な効果を見てみましょう:

まず、コンテンツの紫と青のグラデーションについては触れないことにします。単純な四隅カット + 黒枠 + アウトライン投影ですが、実際には、コーナーカットを実現するためにインターネットのいたるところにある background: linear-gradient を使用し、1px 小さい疑似要素のレイヤーを使用して枠を実現し、投影を実現するために filter: box-shadow を使用するだけです。効果とコードは次のとおりです。

<html>
  <本文>
    <div class="box"></div>
  </本文>
  <スタイル>
    体 {
      背景色: #55486b;
    }
    。箱 {
      マージン: 20px;
      幅: 200ピクセル;
      高さ: 200px;
      zインデックス: 0;
      背景: 線形グラデーション(
            135度、
            透明計算(10px + 1 * 0.414px)、
            #18121a 0
          ）
          左上、
        線形グラデーション(
            -135度、
            透明計算(10px + 1 * 0.414px)、
            #18121a 0
          ）
          右上、
        線形グラデーション(-45度、透明計算(10px + 1 * 0.414px)、#18121a 0)
          右下、
        線形グラデーション(45度、透明計算(10px + 1 * 0.414px)、#18121a 0)
          左下;
      背景サイズ: 55% 50%;
      背景繰り返し: 繰り返しなし;
      位置: 相対的;
      フィルター: ドロップシャドウ(1px 1px 2px rgba(255, 255, 255, 0.3));
    }
    .box::after {
      zインデックス: 1;
      幅: calc(100% - 2 * 1px);
      高さ: calc(100% - 2 * 1px);
      コンテンツ： "";
      表示: ブロック;
      背景: linear-gradient(135度、透明10ピクセル、#3c2f4f 0) 左上、
        linear-gradient(-135度、透明10ピクセル、#3c2f4f 0) 右上、
        線形グラデーション(-45度、透明10ピクセル、#3c2f4f 0) 右下、
        linear-gradient(45度、透明10px、#3c2f4f 0) 左下;
      背景サイズ: 55% 51%;
      背景繰り返し: 繰り返しなし;
      位置: 絶対;
      左: 1px;
      上: 1px;
    }
  </スタイル>
</html>

これは、小さな透明色のセクションと大きな背景色のセクションをつなぎ合わせて、4 つの角を斜めにカットするのと同じです。白線のバグを回避するには、背景サイズを 50% より大きくする必要があります。境界線を実現するには、大きな div 内に小さな疑似要素の別のレイヤーを配置します。しかし、背景色が 4 色で構成されているため、コンテンツ全体にわたってグラデーションを実現することは不可能と思われます。

コンテンツ領域にグラデーションを実現するには、アイデアを変えることができます。疑似要素内の背景はグラデーションになっており、四隅は他の属性でカットされています。このように、他の実装方法もあります。まずは見てみましょう。

方法1: マスク

その他の点は変更されていません。疑似要素は、以前は外側のレイヤーと同じアイデアを使用してコーナーカットを実現していました。このアイデアでは、垂直グラデーションを実現できません（コーナーカットは、すでに斜めの透明な色グラデーションによって行われているため）。そのため、背景色をグラデーションとして直接記述し、マスク属性を使用して 4 つのコーナーを透明にします。

 .box::after {
      zインデックス: 1;
      幅: calc(100% - 2 * 1px);
      高さ: calc(100% - 2 * 1px);
      コンテンツ： "";
      表示: ブロック;
      背景: 線形グラデーション(180度, #3c2f4f, #2e2269);
      -webkit-mask: linear-gradient(135度、透明10ピクセル、#3c2f4f 0) 上
          左、
        linear-gradient(-135度、透明10ピクセル、#3c2f4f 0) 右上、
        線形グラデーション(-45度、透明10ピクセル、#3c2f4f 0) 右下、
        linear-gradient(45度、透明10px、#3c2f4f 0) 左下;
      -webkit-マスクサイズ: 55% 51%;
      -webkit-mask-repeat: 繰り返しなし;
      位置: 絶対;
      左: 1px;
      上: 1px;
    }

上記のコード内の疑似要素のスタイルを少し変更するだけで、実現できます。

方法2: クリップパス

clip-path 属性は、要素の周囲の境界を直接トリミングできます。これを上記の疑似要素に直接適用すると、影も覆われていることがわかります。そこで、考え方を変えて、疑似要素レイヤーを必要とせず、div を 4 つの角に直接トリミングしてみましょう。フィルター属性は重ね合わせることができるため、親要素にフィルターを追加すると、最初の n+1 個のドロップシャドウが重ね合わされて黒い境界線が形成され、最後のドロップシャドウで薄い白の投影が実現されます。効果は以下のとおりです。

<html>
  <本文>
    <div class="outer">
      <div class="box"></div>
    </div>
  </本文>
  <スタイル>
    体 {
      背景色: #55486b;
    }
    .外側{
      フィルター: ドロップシャドウ(0px 0px 1px #18121a) ドロップシャドウ(0px 0px 1px #18121a)
        ドロップシャドウ(0px 0px 1px #18121a)
        ドロップシャドウ(2px 1px 3px rgba(255, 255, 255, 0.3));
    }
    。箱 {
      マージン: 20px;
      幅: 200ピクセル;
      高さ: 200px;
      境界線の半径: 12px;
      位置: 相対的;
 
      背景: 線形グラデーション(180度, #3c2f4f, #2e2269);
      -webkit-クリップパス: ポリゴン(
        20ピクセル0%、
        計算(100% - 20px) 0%,
        100% 20ピクセル、
        100% 計算(100% - 20px)、
        計算(100% - 20px) 100%、
        20ピクセル100%、
        0 計算(100% - 20px)、
        0 20ピクセル
      );
      クリップパス: ポリゴン(
        20ピクセル0%、
        計算(100% - 20px) 0%,
        100% 20ピクセル、
        100% 計算(100% - 20px)、
        計算(100% - 20px) 100%、
        20ピクセル100%、
        0 計算(100% - 20px)、
        0 20ピクセル
      );
      位置: 相対的;
    }
  </スタイル>
</html>

もっと簡単で互換性のある方法があるかどうかはわかりません~~~~

CSSを使用してコーナーカット+ボーダー+投影+コンテンツの背景色のグラデーション効果を実現する方法についての記事はこれで終わりです。関連するCSS背景色グラデーションコンテンツの詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

<<: MySQL における Datetime と Timestamp の使用の概要

>>: Centos7 システムに k8s クラスターを展開するための詳細な紹介