CSS-liukuvärireunus: neljä tapaa piirtää se

CSS-liukuvärireunus on ääriviiva, jonka väri häivytyy pituudellaan. Koukku on, että border-color ottaa vain värejä, ei kuvia, joten sille ei ole yhtä ominaisuutta. Sen sijaan piirrät liukuvärin jonnekin muualle ja näytät siitä vain ohuen kaistan. Siihen on neljä luotettavaa tapaa, ja oikea riippuu kahdesta kysymyksestä: onko elementillä pyöristetyt kulmat ja tarvitseeko sen sisuksen olla läpinäkyvä?

Menetelmä 1: border-image

border-image hyväksyy minkä tahansa kuvan, liukuväri mukaan lukien. Aseta reunuksen leveys ja tyyli, sitten liukuväri ja sitten viipale 1, joka kertoo selaimelle, että koko kuva käytetään reunana. Se on kaksi riviä, toimii kaikkialla ja jättää elementin sisuksen koskemattomaksi.

.panel {
  border: 3px solid;
  border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}

Menetelmä 2: kaksi taustaa ja background-clip

Anna elementille läpinäkyvä reunus ja pinoa sitten kaksi taustaa. Ylin kerros on sisäinen täyttö, rajattuna padding-boxiin, joten se pysähtyy reunuksen sisäreunaan. Alin kerros on liukuväri, rajattuna border-boxiin, joten se ulottuu reunuksen alle. Missä täyttö loppuu, liukuväri näkyy, ja se seuraa border-radiusta täydellisesti.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}

Tämä on menetelmä, johon kannattaa tarttua oletuksena. Sen ainoa rajoitus on, että sisuksen täytyy olla läpinäkymätön, koska läpinäkyvä täyttö paljastaisi liukuvärin koko kortin poikki. Tasaisella sivun värillä olevilla korteilla se ei ole lainkaan rajoitus: käytä sivun väriä täyttönä.

Menetelmä 3: maskitekniikka läpinäkyville sisuksille

Kun kortti on valokuvan tai toisen liukuvärin päällä, keskikohdan täytyy olla läpinäkyvä. Aseta liukuväri kortin peittävälle pseudoelementille, anna sille reunuksen levyinen padding ja maskaa se sitten kahdella kerroksella: yksi peittää vain sisältölaatikon ja yksi kaiken. Toisen poissulkeminen toisesta jättää näkyviin vain paddingrenkaan.

.glass-card {
  position: relative;
  border-radius: 16px;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border width */
  border-radius: inherit;
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

pointer-events: none estää pseudoelementtiä nielemästä klikkauksia, jotka on tarkoitettu kortin sisällölle. MDN:n mask-composite-viite selittää yhdistämisavainsanat. Tämä on menetelmä useimpien hehkuvareunaisten glassmorphism-korttien takana.

Menetelmä 4: pseudoelementti takana hehkuille ja animaatiolle

Aseta liukuvärillinen pseudoelementti hieman korttia suuremmaksi sen sisällön taakse ja peitä keskikohta toisella pseudoelementillä, joka sisältää kortin yhtenäisen täytön. Näkyvä reuna on liukuväri. Koska liukuväri elää omalla kerroksellaan, voit sumentaa siitä kopion hehkuksi tai pyörittää sitä.

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ring {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
}

.ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed);
  animation: spin 6s linear infinite;
}

/* the card's fill, painted over the middle of the ring */
.ring::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0f172a;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ring::before { animation: none; }
}

Ulkosäteen pitäisi olla sisäsäde plus reunuksen leveys, minkä vuoksi pseudoelementti käyttää 18 px:ää 16 px:n kortin ympärillä. Lisää tapoja tuoda liikettä liukuväreihin katso CSS-animoidut liukuvärit.

Suunnitteluvinkkejä liukuvärireunuksiin

Liukuvärireunukset toimivat parhaiten korostuksena. Sama logiikka pätee painikkeisiin, joita käsittelee liukuväripainikkeet CSS:llä.