グラデーションのある境界画像に境界半径を使用できますか?
P粉633733146
2023-08-29 12:52:01
<p>円形の境界線 (境界線の半径) を持つ入力フィールドを設計し、その境界線にグラデーションを追加しようとしています。グラデーションと円形の境界線は正常に作成できますが、どちらも連携できません。グラデーションのない丸い角、またはグラデーションはあるが角が丸い境界線のいずれかです。 </p>
<pre class="brush:php;toolbar:false;">-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre>
<p>2 つの CSS プロパティを連携させる方法はありますか? それとも不可能ですか? </p>
これは可能であり、追加のマークアップ は必要ありませんが、::after
疑似要素
を使用します。これには、背景がグラデーションになった疑似要素を下に配置し、トリミングする必要があります。これは、現在ベンダー プレフィックスやハックを持たないすべてのブラウザー (IE も含む) で機能しますが、レトロ バージョンの IE をサポートしたい場合は、単色のフォールバック、JavaScript、カスタム MSIE CSS 拡張機能 (つまり
フィルター
jsfiddle バージョン、CSSPie - ベクター スプーフィングなど)。
これは例です ():
リーリー リーリー
の有無に関係なく正常に動作します。
擬似要素に影を追加する必要はありません
W3C 仕様によると、これは不可能な可能性があります:
これは、
border-image
が潜在的に複雑なパターンを取る可能性があるためである可能性があります。円形の画像境界線が必要な場合は、自分で境界線を作成する必要があります。