<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

を使用できますが、それは一般的な要素であるため、他の場所からの別のCSSルールによって簡単に配置でき、コードを破ることができます。最初のステップは、要素を見つけて、意図的にオーバーフローを作成することです。 コードは少し奇妙に見えるかもしれませんが、その背後にあるロジックを段階的に説明します。次に、

<code>box-shadow: 10px 8px 10px 5px orange;</code>

の擬似エレメントを使用して、グラデーションシャドウを作成します。

ご覧のとおり、擬似要素は以前のすべての例と同じコードを使用します。唯一の違いは、3D変換が擬似要素ではなく

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

要素に定義されることです?，F(xiàn)在、透明度機能のないグラデーションシャドウがあります：

要素の面積は、黒い輪郭で定義されていることに注意してください。なぜ私はこれをするのですか？このため、マスクを適用して、緑の領(lǐng)域內(nèi)の部品を隠し、影を見る必要があるあふれる部分を保持できます。

これは少し難しいことを知っていますが、Clip-Pathとは異なり、マスク屬性は、コンテンツを表示および非表示にするための要素

の領(lǐng)域を考慮していません。そのため、「外側(cè)」の領(lǐng)域をシミュレートするために、余分な要素を?qū)毪工氡匾ⅳ辘蓼筏俊? また、境界線と挿入図の組み合わせを使用してエリアを定義することに注意してください。これにより、擬似要素が追加の計算を必要としないように、余分な要素のパディングボックスをメイン要素と同じに保つことができます。

追加の要素を使用することで得られるもう1つの有用なことは、要素が固定されており、擬似要素のみが動いていることです（翻訳を使用）。これにより、このトリックの最後のステップであるマスクを簡単に定義できます。

完成！グラデーションシャドウがあり、ボーダーラジウスをサポートしています！內(nèi)部には多くの勾配があるが、そうではない複雑なマスク値が期待されるかもしれません！魔法を完成させるには、2つの単純な勾配とマスクコンポジットのみが必要です。 そこで何が起こっているのかを理解するために

要素を分離しましょう：

<code>.box {
  position: relative;
  z-index: 0; /* 我們強制創(chuàng)建一個堆疊上下文 */
}
/* 創(chuàng)建陰影 */
.box::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -5px;
  transform: translate(10px, 8px);
  background: /* .. */;
  filter: blur(10px);
}
/* 復制主元素樣式 */
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 繼承在主元素上定義的所有裝飾 */
  background: inherit;
  border: inherit;
  box-shadow: inherit;
}</code>

以下は、得た結(jié)果です： 內(nèi)部半徑が主な要素の境界線と一致する方法に注目してください。大きな境界線（150px）と、大きな境界線

プラス

<code>clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)</code>

メイン要素半徑に等しい境界線範囲を定義しました。外部では、150px Rに等しい半徑があります。內(nèi)部的には、150px r -150px = Rがあります。

內(nèi)側(cè)（青）部分を隠し、境界（赤）部分がまだ表示されていることを確認する必要があります。これを行うために、2つのマスクレイヤーを定義しました。1つはコンテンツボックス領(lǐng)域のみをカバーし、もう1つはボーダーボックスエリアをカバーしています（デフォルト）。次に、一方を他方から除外して國境を表示します。

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

同じ手法を使用して、勾配と境界線をサポートする境界線を作成します。アナチューダーにはマスクの複合に関する良い記事もあります。私はあなたにそれを読むことを勧めます。

この方法の欠點はありますか？

はい、これは間違いなく完璧ではありません。最初に遭遇する可能性のある問題は、メイン要素の境界線の使用に関連しています。あなたがそれを考慮しないと、これは半徑のわずかな不整合につながる可能性があります。この問題は私たちの例に存在しますが、気づくのに苦労するかもしれません。

比較的簡単に修正：要素の挿入図に境界幅を追加します。

<code>box-shadow: 10px 8px 10px 5px orange;</code>

もう1つの欠點は、境界に使用する大きな値です（例では150px）。この値は、影を含めるのに十分な大きさでなければなりませんが、オーバーフローやスクロールバーの問題を避けるには大きすぎることはありません。幸いなことに、オンラインジェネレーターはすべてのパラメーターを考慮して最適な値を計算します。

私が気づいた最後の欠點は、複雑な國境帯域を使用するときです。たとえば、各コーナーに異なる半徑を適用する場合は、各側(cè)の変數(shù)を定義する必要があります。これは本當の欠點ではないと思いますが、それはあなたのコードを維持するのが少し難しくなるかもしれません。

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

簡単にするために、オンラインジェネレーターは均一な半徑のみを考慮しますが、複雑な半徑構(gòu)成を検討する場合は、コードを変更する方法を知っています。

要約

終わりに達しました！グラデーションシャドウの背後にある魔法はもはや謎ではありません。私はあなたが持っているかもしれないすべての可能性とすべての問題をカバーしようとしています。私が何かを逃した場合、または問題が見つかった場合は、コメントセクションで自由に報告してください。チェックアウトします。

再び、事実上のソリューションがあなたのユースケースのほとんどをカバーすることを考慮すると、これらの多くは冗長である可能性があります。ただし、テクニックの背後にある「なぜ」と「どのように」、その制限を克服する方法を理解することは良いことです。また、CSSの編集とマットをプレイする際に素晴らしい練習をしました。

もちろん、オンラインジェネレーターをいつでも使用してトラブルを避けることができます。