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

Question

入力ボックスを丸い境界線 (border-radius) でスタイル設定し、境界線にグラデーション効果を追加しようとしています。グラデーションと丸い境界線は正常に作成できますが、両方を同時に作成することはできません。丸い角はあるがグラデーションがない、またはグラデーションはあるが丸い角がないかのどちらかです。

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

これら 2 つの CSS プロパティを同時に有効にする方法はありますか? それとも不可能ですか?

Answer 1

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

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

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

jsfiddle バージョン

):

リーリー リーリー

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

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

• これは、
inset
• の有無にかかわらず、box-shadow とうまく機能します。 疑似要素に影を追加する必要はありません
繰り返しになりますが、これは IE、Firefox、Webkit/Blink ブラウザーに当てはまります。

Answer 2

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

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