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

Question

次の CSS があります:

a.btn.white-grad {
    背景: $lgrey;
    色: #313149 !重要;
    ボーダー: 1px ソリッド #000;
    境界画像ソース: 線形グラデーション(右へ、#9c20aa、#fb3570);
    境界画像スライス: 20;
    フロート: 左;
    @include font-size(26);
    マージン: 75px 0;
}

border-radius: 5px を追加しても効果はないようです。これは境界線のグラデーションを使用しているためだと思います...希望の5pxの境界線半径を達成する方法はありますか?

Answer 1

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

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

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

リーリー リーリー

Answer 2

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

---

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

を調整できます。

リーリー リーリー