検索

ホームページ  >  に質問  >  本文

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

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

全員に返信(2)返信します

  • P粉418854048

    P粉4188540482023-08-22 18:31:09

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

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

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

    jsfiddle バージョン

    ):

    リーリー リーリー

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

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

    返事
    0
  • P粉710454910

    P粉7104549102023-08-22 13:21:05

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

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

    返事
    0
  • キャンセル返事