グラデーションのある境界画像に境界半径を使用できますか?
P粉633733146
P粉633733146 2023-08-29 12:52:01
0
2
532
<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>
P粉633733146
P粉633733146

全員に返信(2)
P粉392861047

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

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

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

jsfiddle バージョン

):

リーリー リーリー

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

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

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート