Ta strona została przetłumaczona przez Cloud Translation API.

Użyj stożkowych gradientów, aby utworzyć modne obramowanie

Gradienty stożkowe można wykorzystać do uzyskania ciekawych efektów, jak na przykład tego fajnego obramowania.

Ten plik CodePen został utworzony przez Adama Argyle, autor posta: tweeta na Twitterze, pokazuje, jak korzystać z łoży stożkowej gradient do i utworzyć obramowanie.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Kreatywnie Terry Mun rozwidlony współtwórca Adama CodePen. Najedź kursorem myszy na i zauważysz zmianę gradientu dzięki odrobinie JavaScriptu. aktualizację właściwości niestandardowej CSS, która przechowuje kąt obrotu.

W poniższych przykładach użyto metody border-image-source usłudze. Ta właściwość ustawia obraz źródłowy użyty do utworzenia elementu obramowania. Podobnie jak w przypadku innych właściwości, które akceptują wartość obrazu, każdy gradient CSS jest również prawidłowy.

`border-image-source`

Obsługa przeglądarek

Źródło

Gradient stożkowy

Obsługa przeglądarek

Źródło