简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Erstellen Sie einen Verlaufsrand mit einem Randradius
P粉930448030
P粉930448030 2023-08-13 16:23:14
0
2
358

Ich habe das folgende CSS: 

a.btn.white-grad { Hintergrund: $lgrey; Farbe: #313149 !important; Rand: 1px fest #000; border-image-source: linear-gradient(to right, #9c20aa, #fb3570); Randbild-Slice: 20; schweben: links; @include Schriftgröße(26); Rand: 75px 0; }

Das Hinzufügen von border-radius: 5px scheint keine Auswirkung zu haben. Ich denke, das liegt daran, dass ich einen Randverlauf verwende. Gibt es eine Möglichkeit, den gewünschten Randradius von 5 Pixeln zu erreichen?

P粉930448030
P粉930448030

Antworte allen (2)
P粉541565322
P粉5415653222023-08-14 15:04:39 2 Etage

2023 - 单个元素，无伪元素，无SVG，无遮罩。

我不能为此负责，我在一个网站上看到的（我忘记了网站的名字，也找不到它了）。

  • 它只是一个普通的带有圆角和渐变背景的按钮
  • 它使用了一个inset的box-shadow来填充内部的白色
  • 它有一个2px的边框，实际上是透明的，所以按钮的边缘可以透过来显示


body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* 填充内部白色 */ background-origin: border-box; box-shadow: inset 0 1000px white; /* 透明边框，所以按钮的边缘可以透过来显示 */ border: 2px solid transparent; }


Wie+0
Antwort hinzufügen
    P粉066224086
    P粉0662240862023-08-14 09:22:15 1 Etage

    2021：如果你想要透明度，我建议使用CSS遮罩方法，因为现在的支持相当不错

    你不能在渐变中使用border-radius。这里有另一个想法，你可以依赖多个背景并调整background-clip：


    .white-grad { background: linear-gradient(#ccc 0 0) padding-box, /*这是你的灰色背景*/ linear-gradient(to right, #9c20aa, #fb3570) border-box; color: #313149; padding: 10px; border: 5px solid transparent; border-radius: 15px; display: inline-block; margin: 75px 0; }
     这里放置一些文字
     
     这里放置一些很长很长的文字
     
     这里放置一些很长很长的文字
    这里放置一些很长的文字
    Wie+0
    Antwort hinzufügen
      Beliebte Themen
      Mehr>
      Populäre Artikel
      Beliebte Tutorials
      Mehr>
      Verwandte Tutorials
      Beliebte Empfehlungen
      Aktuelle Kurse
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！