境界線のグラデーションは境界線の半径と互換性がありますか?

Question

丸い境界線 (border-radius) を使用して入力ボックスをスタイルし、境界線にグラデーション効果を追加しようとしています。グラデーションと丸い境界線は正常に作成できますが、両方を同時に作成することはできません。丸い角はあるがグラデーションがない、またはグラデーションはあるが丸い角がないかのどちらかです。 -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(linear,00,0100%,from(#b0bbc4),to(#ce

P粉418854048 · Answer

これは可能であり、 には追加のマークアップ は必要ありませんが、代わりに ::after 疑似要素が使用されます。

これには、背景がグラデーションになった疑似要素をその下に配置し、トリミングする必要があります。これは、ベンダープレフィックスやハックなしで (IE も含めて) 現在のすべてのブラウザーで機能しますが、古いバージョンの IE をサポートしたい場合は、単色のフォールバック、JavaScript、カスタム MSIE CSS 拡張機能 (つまり

##) の使用を検討する必要があります。 #filter、CSSPie のようなベクトルトリックなど)。 これは実際の例です (

jsfiddle バージョン

):

リーリーリーリー

上記の追加のスタイルは表示用です:

これはどんな背景でも機能します

これは、
の有無にかかわらず、box-shadowとうまく機能します。疑似要素に影を追加する必要はありません

P粉710454910 · Answer

W3C 仕様によるとおそらく不可能です:

これは、border-image が潜在的に複雑なパターンを採用する可能性があるためである可能性があります。円形の画像境界線が必要な場合は、自分で境界線を作成する必要があります。