Gradient graniczne - CSS

Korzystanie z intuicyjnych kolorów w projektowaniu stron internetowych może pomóc w zwróceniu uwagi użytkownika. W aplikacjach internetowych można wykorzystać różne metody kolorów. Kolory gradientu są znaczące i atrakcyjne, ponieważ łączą kilka kolorów, aby uzyskać więcej kolorów. Nie ma konkretnych właściwości CSS, które dodają granice gradientu wokół elementu. Jednak niektóre inne właściwości pomagają nam w tym kontekście.

W tym poście opisuje, jak zastosować granice gradientu w CSS.

Jak zastosować granice gradientu w CSS?

Wymieniliśmy metody stosowania granic gradientu wokół elementu HTML:

• Metoda 1: Dodaj granicę gradientu wokół elementu za pomocą CSS ”obraz graniczny" Nieruchomość
• Metoda 2: Dodaj granicę gradientu wokół elementu za pomocą CSS ”wyściółka" Nieruchomość

Przed wskoczeniem do wyżej wymienionych metod najpierw utwórzmy stronę HTML.

Warunek wstępny

Postępuj zgodnie z instrukcjami utworzenia strony HTML:

• Dodać "”Element i przypisz go klasa„główny".
• Wewnątrz tego elementu dodaj kolejny element „”, aby umieścić obraz. Ustaw swoją klasę jako „obraz". Ten element DIV zawiera „„Tag za pomocą atrybutów„ src ”,„ alt ”i„ szerokości ”.
• „„src”Atrybut określa adres URL obrazu.
• „„Alt”Atrybut definiuje tekst, który wyświetli się na ekranie, jeśli obraz nie może załadować.
• „„szerokość”Określa szerokość obrazu.

Oto kod HTML:

Zastosujmy trochę stylizacji CSS na stronie HTML.

Element stylu „”

Element DIV posiadający klasę „główny”Jest stylizowany z następującymi właściwościami CSS:

.główny
Szerokość: 350px;
Wysokość: 230px;
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;
Margines: Auto;

Opis wyżej wymienionego kodu jest wymieniony poniżej:

• "szerokość”Dostosowuje szerokość elementu.
• "wysokość”Określa wysokość elementu.
• "wyświetlacz„Właściwość określa zachowanie wyświetlania elementu. Wartość "przewód”Ukazanie układu elementu elastycznego.
• "justify-content„Obiekt wyrównuje elastyczne elementy poziomo.
• "Wyrównanie”Wyrównuje elastyczne elementy pionowo.
• "margines”Dodaje przestrzeń wokół elementu.

Można zauważyć, że obraz jest pomyślnie dostosowywany do strony internetowej:

Metoda 1: Dodaj granicę gradientu wokół elementu za pomocą właściwości CSS „Image”

Teraz, w ciągłym przykładzie, CSS „obraz graniczny„Własność jest wykorzystywana do generowania gradientów. W CSS dodaj następujące właściwości do Div z klasą „.główny”:

granica: 5px stały przezroczysty;
Imaga graniczna: gradient liniowy (40DEG, RGB (19, 29, 163), RGB (138, 211, 253)) 1;

Poniżej znajduje się wyjaśnienie wyżej wymienionych nieruchomości:

• "granica”Jest właściwością skrótów, która stosuje granicę wokół elementu poprzez określenie szerokości, stylu i koloru granicy.
• "obraz graniczny”Przypisany jest wartość„gradient liniowy()”Funkcja, która tworzy obraz z wieloma kolorami, które postępują w określonym kierunku. Ta funkcja zawiera pewne parametry. Pierwsza wartość reprezentuje „kąt„Do którego gradient się przechyli, a następnie początek i koniec gradientu są określone przez dwa„kolor”Wartości. Ostatecznie definiuje się krycie.

Poniższy obraz pokazuje, że granica gradientu została pomyślnie zastosowana wokół obrazu:

Metoda 2: Dodaj granicę gradientu wokół elementu za pomocą właściwości CSS „Wyściółka”

Aby dodać element gradientu, dwa ważne właściwości CSS są wymienione poniżej:

• „„główny„Div jest stylizowany„tło„Własność o wartości przypisanej jako„gradient liniowy()”Funkcja.
• Kontener DIV o „obraz„Klasa jest przypisana„wyściółka„Obiekt o produkcji przestrzeni wokół„" element. Ułatwi to dostrzeganie tła gradientu „główny„Klasa Div jako granica obrazu.

Zaimplementujmy te dwa punkty.

Stylowa klasa „główna”

.główny
Szerokość: 380px;
Tło: liniowy gradient (po prawej, RGB (17, 17, 17), RGB (184, 178, 178), RGBA (141, 19, 86, 0.857));
Margines: Auto;
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;

„„.główny”Jest wykorzystywany do dostępu do elementu DIV z klasą„główny". Zastosowane są do niego następujące właściwości:

• "tło„Własność jest przypisywana funkcja„ lini-gradient () ”jako wartość. Ma kilka parametrów. Pierwsza wartość reprezentuje kierunek gradientu. Pozostałe trzy parametry reprezentują kolory gradientu.

Styl „Image” Div

.obraz
Wyściółka: 10px;

CSS „wyściółka„Nieruchomość jest stosowana do kontenera Div o klasie”obraz". Ta nieruchomość będzie produkować przestrzeń wokół jej treści. W naszym przypadku osadziliśmy obraz.

Gradient granica wokół obrazu pokazano na poniższym wyjściu:

Nauczyliśmy się metod stosowania granic gradientu wokół elementów za pomocą CSS.

Wniosek

W CSS „obraz graniczny„Właściwość o wartości przypisanej jako„gradient liniowy()”Funkcja jest wykorzystywana do dodawania granic gradientu wokół elementu. CSS „wyściółka„Własność może być również pomocna w przedstawieniu tła gradientu jako granicy z zawartością. W tym poście wykazaliśmy, jak stosować granice gradientu wokół elementów za pomocą CSS.