Użyj stożkowych gradientów, aby utworzyć modne obramowanie
bookmark_borderbookmark
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Gradienty stożkowe można wykorzystać do tworzenia ciekawych efektów, takich jak to ładne obramowanie.
Ten CodePen stworzony przez Adama Argyle, pierwotnie udostępniony na Twitterze za pomocą tego tweeta, pokazuje, jak użyć gradientu stożkowego do utworzenia obramowania.
.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%)
);
}
Terry Mun w sposób twórczy przejęli kodpen Adama i utworzyli CodePen. Przesuń kursor nad elementem, aby zobaczyć, jak gradient zmienia się dzięki niewielkiemu fragmentowi kodu JavaScript, który aktualizuje właściwość niestandardową CSS przechowującą kąt obrotu.
W tych przykładach użyto właściwości border-image-source
. Ta właściwość ustawia obraz źródłowy służący do utworzenia obramowania elementu. Podobnie jak w przypadku innych właściwości, które akceptują wartość obrazu, dowolny typ gradientu CSS jest prawidłowy.
border-image-source
Gradient stożkowy
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2022-05-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2022-05-27 UTC."],[],[]]