Na tym blogu omówione zostaną:
Co to jest promień konturu?
„ zarys ” służy do kształtowania obrysu elementu, ale nie można jej bezpośrednio zaimplementować. Dlatego alternatywną metodą zastosowania efektu promienia do konturu jest użycie „ promień granicy „Właściwość CSS. Określa zaokrąglone rogi dla konturów.
Jak zastosować efekt promienia konturu na elemencie HTML?
Aby użyć właściwości promienia konturu, postępuj zgodnie z podanymi instrukcjami.
Krok 1: Osadź nagłówki
Najpierw osadź nagłówki, używając dowolnego znacznika nagłówka z „ ' do ' ”. Na przykład wykorzystaliśmy „ ' oraz ' ” do osadzania dwóch różnych nagłówków w dokumencie HTML.
Krok 2: Dodaj pierwszy kontener div
Następnie dodaj kontener za pomocą „
Krok 3: Utwórz drugi kontener div
Utwórz kolejny ' dz ”postępując zgodnie z tą samą procedurą:
< h1 styl = 'kolor:rgb(48, 10, 218)' > Linuxhint LTD Wielka Brytania < / h1 >
< h2 >
Różne przykłady promienia obramowania w celu utworzenia narożników okrągłego konturu.
< / h2 >
< dz klasa = 'pole 1-dział' >
Linuxhint zapewnia najlepszą i najbardziej unikalną zawartość dla swoich użytkowników.
< / dz >
< dz klasa = 'pole 2-dział' >
Działa w wielu kategoriach.
< / dz >
Wyjście powyższego kodu pokazano poniżej:
Krok 4: Ustaw zarys pierwszego pojemnika
Uzyskaj dostęp do pierwszego kontenera, korzystając z opcji „ .box1-dział ” klasa, w której „ . ” jest selektorem dostępu do klasy:
.box1-dział {zarys : solidny ;
szerokość : 300 pikseli ;
wyściółka : 15 piks ;
margines : 25px ;
}
Następnie zastosuj poniższe właściwości CSS:
- „ zarys ” służy do dodawania obrysu wokół elementu. Na przykład jego wartość jest ustawiona jako „ solidny ”.
- “ szerokość ” określa rozmiar elementu w poziomie.
- “ wyściółka ” służy do przydzielania przestrzeni wokół zawartości elementu.
- “ margines ” określ odstęp po zewnętrznej stronie obramowania elementu.
Krok 5: Ustaw kontur drugiego pojemnika
Teraz uzyskaj dostęp do drugiego elementu za pomocą odpowiedniej klasy „ .box2-dział ”:
.box2-dział {zarys : solidny ;
promień granicy : 20px ;
szerokość : 300 pikseli ;
wyściółka : 15 piks ;
margines : 25px ;
}
Zastosuj właściwość CSS „ promień granicy ” do definiowania promienia elementu. Ta właściwość umożliwia dodanie zaokrąglonych rogów wokół elementu:
Można zauważyć, że pomyślnie dodaliśmy efekt promienia konturu na elemencie HTML.
Wniosek
„ promień konturu ' nie jest już dostępne. Użytkownicy mogą zastosować właściwości promienia konturu za pomocą właściwości CSS „outline” i „border-radius”. „ zarys ” dodaje kontur wokół elementu, a „ promień granicy ” jest specjalnie używany do stylizacji konturu. Ten post pokazał instrukcje dodawania efektu promienia konturu wokół elementu w HTML.