グラデーションのある境界画像に境界半径を使用できますか?

Question

円形の境界線 (境界線の半径) を持つ入力フィールドを設計し、その境界線にグラデーションを追加しようとしています。グラデーションと円形の境界線は正常に作成できますが、どちらも連携できません。グラデーションのない丸い角、またはグラデーションはあるが角が丸い境界線のいずれかです。

-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 拡張機能 (つまり

フィルター、CSSPie - ベクター スプーフィングなど)。 これは例です (

jsfiddle バージョン

):

リーリー リーリー

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

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

• box-shadow
、
• inset の有無に関係なく正常に動作します。 擬似要素に影を追加する必要はありません
• 繰り返しますが、これは IE、Firefox、Webkit/Blink ブラウザーで機能します。

Answer 2

W3C 仕様によると、これは不可能な可能性があります:

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