CSS - CSS3 Klapity gradient

Wyjście

Krok 3: Styl kontener Div

Uzyskaj dostęp do kontenera Div za pomocą nazwy klasy z selektorem klasy jako „#główna zawartość”:

#główna zawartość
kolor tła: Lightgreen;
Margines: 20px 80px;
Border: 3px kropkowany niebieski;

Następnie zastosuj poniższe wymienione właściwości CSS:

• "kolor tła”Jest wykorzystywany do ustawiania koloru na tylnej części elementu.
• "margines„Przydziela przestrzeń po zewnętrznej stronie zdefiniowanej granicy.
• "granica„Własność jest używana do określania granicy wokół zdefiniowanego elementu.

Krok 4: Style akapit

Teraz stygnij akapit, uzyskując dostęp do niego z nazwą klasy „.Paragraf-1”:

.akapit-1
kolor niebieski;
Olflow: ukryty;
Pozycja: względny;
Mode mieszanki: twarde światło;
Rozmiar czcionki: 30px;

Tutaj:

• "kolor„Właściwość przydziela kolor do tekstu w akapicie.
• "przelewowy”Jest wykorzystywany do wyświetlania wyników, gdy treść rozlewa się z pudełka elementu. Ta właściwość określa, czy pobrać tekst, czy dodać paski przewijania, gdy treść tego elementu jest długa, aby ustawić w określonym obszarze.
• "pozycja”Ustawia pozycję elementu w dokumencie.
• "Mode mieszanki„Właściwość CSS jest wykorzystywana do ustawiania zawartości elementu zmieszanego z treścią i tłem elementu.
• "rozmiar czcionki”Służy do zdefiniowania określonej czcionki dla tekstu w akapicie.

Krok 5: Ustaw w akapicie „liniowy”

Użyj „.Paragraf-1„Aby uzyskać dostęp do klasy„: After ”:

.Paragraft-1: po
Pozycja: absolutna;
TOP: 0px;
Tło: liniowy gradient (przezroczysty, szary);
po lewej: 0px;
treść: "";
szerokość: 100%;
Wysokość: 100%;
Wskaźniki: Brak;

Według danego fragmentu kodu:

• "pozycja”Jest ustawiony jako absolutny w tym fragmencie.
• "lewy" I "szczyt”Właściwości są używane do ustawienia pozycji elementu po lewej i górnej stronie.
• "tło„Ustawianie właściwości jako„ gradient liniowy ”tworzy tło składające się z ciągłego przejścia między różnymi kolorami z linią prostą.
• "treść„Własność jest wykorzystywana do ustawiania treści.
• "szerokość„Przydziela szerokość elementu.
• "wysokość„Właściwość jest wykorzystywana do ustawiania wysokości zdefiniowanego elementu.
• "Wskaźnik”Określa warunki, w których pewien element wizualny stał się celem wydarzenia

Wyjście

Można zauważyć, że gradient krycia CSS został pomyślnie zastosowany.

Wniosek

Aby ustawić gradient krycia, najpierw dodaj tekst w akapicie za pomocą „

”Tag. Następnie uzyskaj dostęp do akapitu i zastosuj „tło„Właściwość CSS i ustaw wartość tej właściwości jako„gradient liniowy". Tworzy tło składające się z postępowego przejścia między dwoma lub więcej kolorami wzdłuż linii prostej. Ten zapis wyjaśnił gradient krycia CSS.