Buat sempadan kecerunan dengan jejari sempadan

Question

Saya mempunyai CSS berikut:

a.btn.white-grad {
    latar belakang: $lgrey;
    warna: #313149 !penting;
    sempadan: 1px pepejal #000;
    sumber-imej sempadan: kecerunan-linear(ke kanan, #9c20aa, #fb3570);
    keping-imej sempadan: 20;
    terapung: kiri;
    @include font-size(26);
    jidar: 75px 0;
}

Menambah jejari sempadan: 5px Saya rasa ini kerana saya menggunakan kecerunan sempadan... Adakah terdapat cara untuk mencapai jejari sempadan 5px yang dikehendaki?

Answer 1

2023 - Unsur tunggal, tiada unsur pseudo, tiada SVG, tiada topeng.

Saya tidak boleh bertanggungjawab untuk ini, saya melihatnya di laman web (saya lupa nama laman web dan tidak dapat mencarinya).

• Ia hanyalah butang biasa dengan bucu bulat dan latar belakang kecerunan
• Ia menggunakan inset的box-shadow untuk mengisi bahagian dalam yang putih
• Ia mempunyai sempadan 2px dan sebenarnya lutsinar, jadi bahagian tepi butang kelihatan melalui

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;
}

<button class="gradient-border">Hello</button>

Answer 2

2021: Jika anda mahukan ketelusan, saya syorkan menggunakan kaedah topeng CSS kerana sokongannya cukup bagus sekarang

---

Anda tidak boleh menggunakan border-radius。这里有另一个想法，你可以依赖多个背景并调整background-clip dalam kecerunan:

.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;
}

<div class="white-grad"> 这里放置一些文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字<br>这里放置一些很长的文字</div>