Użytkownicy mogą ulepszyć układ dokumentów HTML i stron internetowych za pomocą CSS. W tym celu używane jest wiele właściwości CSS, a „zarys” i „promieniowanie granicy” są jednym z nich. Mówiąc dokładniej, „zarys„Własność służy do narysowania konturu i„Radiusz graniczny”Jest wykorzystywany do ustawiania zaokrąglonych zakątków zarysowanego elementu.

Ten blog omówi:

• Co to jest promień konturu?
• Jak zastosować efekt promienia konturu na element HTML?

Jaki jest promień konturu?

„„zarys„Właściwość służy do kształtowania zarysu elementu, ale nie można go wdrożyć bezpośrednio. Dlatego alternatywną metodą zastosowania efektu promienia na zarys jest stosowanie „Radiusz graniczny„Własność CSS. Określa zaokrąglone rogi dla konturów.

Jak zastosować efekt promienia konturu na element HTML?

Aby skorzystać z właściwości promienia konturu, przejdź przez podane instrukcje.

Krok 1: Osadza nagłówki

Początkowo osadziłem nagłówki, wykorzystując dowolny tag nagłówka z „

" Do "

". Na przykład wykorzystaliśmy „

" I "

Krok 2: Dodaj pierwszy kontener DIV

Następnie dodaj pojemnik za pomocą „”Tag. Włóż także „klasa”Atrybut i określ nazwę klasy zgodnie z wyborem.

Krok 3: Utwórz drugi kontener DIV

Utwórz kolejny "div„Pojemnik, postępując zgodnie z tą samą procedurą:

Linuxhint Ltd UK

Różne przykłady dla promocka granicznego w celu stworzenia zakątków konturu okólnika.

Linuxhint zapewnia najlepszą i najbardziej unikalną treść dla swoich użytkowników.


Działa w wielu kategoriach.

Dane wyjściowe powyższego kodu pokazano poniżej:

Krok 4: Ustaw zarys pierwszego kontenera

Uzyskaj dostęp do pierwszego kontenera, wykorzystując „.Box1-Div„Klasa, w której„.”To selektor do dostępu do klasy:

.Box1-Div
Zarys: Solidny;
szerokość: 300px;
Wyściółka: 15px;
Margines: 25px;

Następnie zastosuj poniżej listy właściwości CSS:

• „„zarys„Właściwość jest wykorzystywana do dodania zarysu wokół elementu. Na przykład jego wartość jest ustalana jako „solidny".
• "szerokość”Określa rozmiar elementu poziomo.
• "wyściółka”Jest wykorzystywany do przydzielania przestrzeni wokół zawartości elementu.
• "margines”Określ przestrzeń po zewnętrznej stronie granicy elementu.

Krok 5: Ustaw zarys drugiego pojemnika

Teraz uzyskaj dostęp do drugiego elementu za pomocą jego klasy „.Box2-Div”:

.Box2-Div
Zarys: Solidny;
Radiusz graniczny: 20px;
szerokość: 300px;
Wyściółka: 15px;
Margines: 25px;

Zastosuj właściwość CSS ”Radiusz graniczny”W celu zdefiniowania promienia elementu. Ta właściwość pozwala dodawać zaokrąglone zakątki wokół elementu:

Można zauważyć, że pomyślnie dodaliśmy efekt promienia konturu na element HTML.

Wniosek

„„Zarys Radia" nie jest już dostępne. Użytkownicy mogą zastosować właściwości promieniowania zarysu za pomocą właściwości CSS „Zarys” i „Radiusza”. „„zarys”Dodaje zarys wokół elementu i„Radiusz graniczny”Jest specjalnie używany do stylizacji zarysu. Ten post wykazał instrukcje dodawania efektu promienia zarysu wokół elementu w HTML.