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

[Canonical HTML page](https://gradiently.design/fi/guide/css-gradient-border)

border-color ei ota liukuväriä, joten jokainen liukuväriääriviiva on kiertotie. Tässä ovat neljä, joilla on merkitystä, mitä kukin osaa ja ei osaa ja mihin kannattaa tarttua.

## The short version

- CSS ei voi asettaa liukuväriä border-coloriin, joten CSS-liukuvärireunus piirretään aina toisella tekniikalla.
- border-image liukuvärillä on lyhin menetelmä, mutta se ohittaa border-radiuksen, joten se sopii vain teräväkulmaisille.
- Kaksi taustakerrosta, toinen rajattu padding-boxiin ja toinen border-boxiin, antavat pyöristetyn liukuvärireunuksen, kunhan sisus on yhtenäistä väriä.
- Maskitekniikka leikkaa liukuvärikerroksen keskikohdan pois, mikä antaa pyöristetyn liukuvärireunuksen läpinäkyvällä sisuksella.
- Pyörivä kartiomainen liukuväri, jota ohjaa @propertyllä rekisteröity mukautettu ominaisuus, on tavallinen tapa animoida liukuvärireunus.

**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ä | Pyöristetyt kulmat | Läpinäkyvä sisus | Sopii parhaiten |
| --- | --- | --- | --- |
| `border-image` | Ei | Kyllä | Teräväkulmaiset kortit, jakajat, taulukot |
| Kaksi taustaa | Kyllä | Ei, tarvitsee yhtenäisen täytön | Useimmat kortit ja painikkeet |
| Maski pseudoelementillä | Kyllä | Kyllä | Kortit kuvien tai liukuvärien päällä |
| Pseudoelementti takana | Kyllä | Ei | Hehkut ja animoidut renkaat |

Valitse kahden kysymyksen mukaan: kulmat ja sisus.

- Violetista syaaniin: `linear-gradient(135deg, #7c3aed, #22d3ee)`
- Mandariinista magentaan: `linear-gradient(135deg, #f97316, #db2777)`
- Limetistä petrooliin: `linear-gradient(135deg, #a3e635, #0d9488)`
- Hopeareuna: `linear-gradient(135deg, #e5e7eb, #6b7280, #f9fafb)`

Liukuvärit, jotka toimivat hyvin ohuina ääriviivoina. Korkea kylläisyys on tärkeämpää 2 px:n viivalla kuin koko taustalla.

## 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.

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

Lyhin liukuvärireunus. `1` on viipaleen arvo. Ilman sitä reunus piirtyy vain kulmiin.

> **Ei pyöristettyjä kulmia** `border-image`n kanssa `border-radius` rajaa yhä taustan, mutta itse reunus pysyy teräväkulmaisena. Jos elementin täytyy olla pyöristetty, käytä jotain muuta menetelmää.

## 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-box`iin, joten se pysähtyy reunuksen sisäreunaan. Alin kerros on liukuväri, rajattuna `border-box`iin, joten se ulottuu reunuksen alle. Missä täyttö loppuu, liukuväri näkyy, ja se seuraa `border-radius`ta täydellisesti.

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

Täyttö kirjoitetaan yhden värin liukuvärinä, koska vain kuvia voi kerrostaa näin.

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ä.

> **Miksi lyhennysmerkintä on tärkeä** `border-box`in kirjoittaminen kerran `background`-lyhenteessä asettaa sekä `background-origin`in että `background-clip`in, joten liukuväri mitoitetaan ulkoreunaan. Jos asetat vain `background-clip: border-box` pitkässä muodossa, liukuväri mitoitetaan padding-boxiin ja toistuu reunuksen alla jättäen ohuita vääränvärisiä kaistaleita reunoille.

## 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.

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

Liukuvärirengas läpinäkyvällä keskellä. Etuliitteellinen pari kattaa vanhemman WebKitin, ja vakiomuotoinen `mask`-rivi kattaa kaiken nykyisen.

`pointer-events: none` estää pseudoelementtiä nielemästä klikkauksia, jotka on tarkoitettu kortin sisällölle. [MDN:n mask-composite-viite](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite) selittää yhdistämisavainsanat. Tämä on menetelmä useimpien hehkuvareunaisten [glassmorphism](https://gradiently.design/fi/guide/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ä.

```css
@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; }
}
```

Animoitu liukuvärireunus. Rekisteröity `--angle` antaa selaimen interpoloida kartion aloituskulmaa sujuvasti, ja `::after` maalaa täytön keskikohdan päälle.

Pyörivän renkaan liukuväri: `conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)`

Ensimmäisen värin toisto lopussa piilottaa sauman sen pyöriessä. [CSS-kartiomaiset liukuvärit](https://gradiently.design/fi/guide/css-conic-gradient) kattaa funktion syvällisesti.

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](https://gradiently.design/fi/guide/css-animated-gradient).

## Suunnitteluvinkkejä liukuvärireunuksiin

### Vältä

- Liukuvärireunukset jokaisessa ruudukon kortissa
- Matalan kylläisyyden liukuvärit 1 px:n viivalla, jotka näyttävät harmailta
- Liukuvärireunus ja liukuvärillinen täyttö samalla elementillä
- Nopeasti pyörivät renkaat sisällöllä, jota ihmisten pitää lukea

### Tee näin

- Varaa liukuvärireuna yhdelle korostetulle kohteelle, kuten suositellulle paketille
- Käytä 2 px:ää tai enemmän ja kylläisiä pysäytyksiä
- Rauhallinen täyttö ja eloisa reuna tai päinvastoin
- Hidas pyöriminen, pysäytettynä vähennettyä liikettä varten

Liukuvärireunukset toimivat parhaiten korostuksena. Sama logiikka pätee painikkeisiin, joita käsittelee [liukuväripainikkeet CSS:llä](https://gradiently.design/fi/guide/css-gradient-button).

## FAQ

### Miten teen liukuvärireunuksen CSS:llä?

Nopein tapa on `border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;`. Pyöristetyille kulmille käytä kahta taustaa, jotka on rajattu `padding-box`iin ja `border-box`iin.

### Miksi border-radius ei toimi border-imagen kanssa?

Määrittelyn mukaan `border-image`llä piirrettyä reunusta ei pyöristetä `border-radius`illa. Käytä background-clip- tai maskimenetelmää pyöristetyille liukuvärireunuksille.

### Miten teen liukuvärireunuksen läpinäkyvällä taustalla?

Käytä maskitekniikkaa: liukuvärillinen pseudoelementti, reunuksen levyinen padding ja maski, joka sulkee pois sen sisältölaatikon.

### Miten animoin liukuvärireunuksen?

Rekisteröi kulma `@property`llä, käytä sitä kartiomaisen liukuvärin `from`-kulmana pseudoelementillä ja animoi tuota ominaisuutta 0deg:sta 360deg:hen.

### Mitä liukuvärireunusmenetelmää minun pitäisi käyttää?

Käytä kahta taustaa useimmille pyöristetyille korteille ja painikkeille, `border-image`a teräväkulmaisille reunoille ja maskitekniikkaa vain, kun sisuksen täytyy pysyä läpinäkyvänä.