CSS3 にインライン ボックス シャドウがあるのと同じように、インライン シャドウのあるボックスを作成する必要があります。私がこれまでに見つけたのは、feGaussianBlur を使用したフィルターですが、問題は、ボックスの外側にも影を追加してしまうことであり、これは望ましくありません。これは私がこれまでに得たコードです:
リーリーデモを作成し、このコードを目的の CSS 制作結果と比較しました。このフィルターは長方形だけでなく、台形やより複雑な多角形にも作用します。
RadialGradient を使用してみましたが、グラデーションが円形になるため、これも良くありません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私が見つけた実験に主に基づいて、これが私が思いついたものです:
リーリーパディングを表示したい場合は、最後の
fill="transparent"はフィルターに使用可能なアルファを与えず、シャドウも生成しません。ソリッドパディングがある場合は、
を追加できます。 リーリーフィルターの終わりに向かって、ブラーを SourceGraphic の形状にクリップします。シェイプは透明なので、さらに作業を行う必要があります。正しい構成を選択できるように元の形状に半透明の塗りつぶしを使用し、最終操作で塗りつぶしをゼロにするために feFuncA を使用することをお勧めします。これは非常に複雑であることがわかります。しかし、これはどんな実線の形状にも機能する解決策です
リーリーこれは私の fiddle ブランチです:http://jsfiddle.net/kkPM4/