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

境界線の半径を指定してグラデーション境界線を作成する

<p>次の CSS があります: </p> <pre class="brush:php;toolbar:false;">a.btn.white-grad { 背景: $lgrey; 色: #313149 !重要; ボーダー: 1px ソリッド #000; 境界画像ソース: 線形グラデーション(右へ、#9c20aa、#fb3570); 境界画像スライス: 20; フロート: 左; @include font-size(26); マージン: 75px 0; }</pre> <p><code>border-radius: 5px</code> を追加しても効果はないようです。これは境界線のグラデーションを使用しているためだと思います...希望の5pxの境界線半径を達成する方法はありますか? </p>
P粉930448030P粉930448030455日前427

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

  • P粉541565322

    P粉5415653222023-08-14 15:04:39

    2023 - 単一要素、擬似要素、SVG、マスクなし。

    私はこれについて責任を負いません。Web サイトで見ました (Web サイトの名前を忘れてしまい、見つかりませんでした)。

    • これは、角が丸く、背景がグラデーションになっている通常のボタンです。
    • これは、insetbox-shadow を使用して内側の白を塗りつぶします
    • これには 2 ピクセルの境界線があり、実際には透明なので、ボタンの端が透けて見えます。


    リーリー リーリー


    返事
    0
  • P粉066224086

    P粉0662240862023-08-14 09:22:15

    2021: 透明性が必要な場合は、現在サポートがかなり充実しているため、CSS マスク メソッドを使用することをお勧めします


    グラデーションでは border-radius を使用できません。これは別のアイデアです。複数の背景を利用して、background-clip:

    を調整できます。


    リーリー リーリー

    返事
    0
  • キャンセル返事