国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

境界線のグラデーションは境界線の半徑と互換性がありますか?
P粉824889650
P粉824889650 2023-08-21 20:39:38
0
2
653
<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粉824889650
P粉824889650

全員に返信(2)
P粉418854048

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

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

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

jsfiddle バージョン

):

リーリー リーリー

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

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

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

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

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