Krąg CSS z granicą

Kształty są często używane w projektowaniu stron internetowych. Mówiąc dokładniej, kształt koła służy do przyciągnięcia uwagi użytkownika i do wyróżnienia, takich jak zdjęcia profilowe, są głównie osadzone w ramce koła. CSS oferuje kilka właściwości stylizacji elementów, aby wyglądały lepiej w aplikacji, takiej jak „Radiusz graniczny„Nieruchomość jest wykorzystywana do wykonywania krawędzi elementu i„ „granica„Właściwość ustawia granicę elementu.

Ten zapis będzie Cię poinformowany:

• Jak stworzyć okrąg z granicą w CSS?
• Jak dodać kolor w granicznym okręgu za pomocą CSS?
• Jak dostosować styl graniczny koła za pomocą CSS?

Jak stworzyć okrąg z granicą w CSS?

Aby utworzyć okrąg z granicą w CSS, po pierwsze, właściwość graniczna służy do zastosowania granicy wokół elementu. „„Radiusz graniczny„Własność służy do tworzenia okrągłego kształtu granicznego.

W tym celu przejrzyj dostarczony przykład.

Utwórz plik HTML

Najpierw dodaj „”Element i przypisz go klasa„Circle-Div”:

Style „Circle-Div”

Uzyskać dostęp do "”Pojemnik z pomocą określonej klasy„.Circle-Div”I zastosuj następujące właściwości:

.circle-div
szerokość: 200px;
Wysokość: 200px;
Radiusz graniczny: 50%;
granica: 5px Solid RGB (119, 0, 255);

Tutaj:

• "szerokość”Określa szerokość koła.
• "wysokość”Określa wysokość koła.
• "Radiusz graniczny”Z wartością„50%”Oznacza granicę koła.
• "granica”Jest wykorzystywany do nakładania granicy o określonej szerokości granicy, stylu i koloru.

Wyjście

Jak dodać kolor w granicznym okręgu za pomocą CSS?

CSS „kolor tła„Własność jest wykorzystywana do dodawania koloru do okręgu w następujący sposób:

kolor tła: LighteAgreen;

Wyjście

Jak dostosować styl graniczny koła za pomocą CSS?

Określając styl graniczny, możemy stylizować granicę koła. Niektóre często używane style graniczne są wymienione poniżej:

• Kropkowany
• Solidny
• Rowek
• Wstawka
• Początek
• Podwójnie

Kropkowana granica

Ustaw styl graniczny na „kropkowany„Aby określić przerywaną granicę:

granica: 5px kropkowane RGB (252, 87, 170);

Wyjście

Groove Border

Zastosuj styl graniczny „rowek„W nieruchomości granicznej:

Border: 10px Groove RGB (187, 181, 226);

Wyjście

Z powodzeniem zademonstrowaliśmy, jak tworzyć i stylizować graniczne koło w CSS.

Wniosek

Aby utworzyć koło z granicami, wykorzystywane są dwie główne właściwości CSS. Aby utworzyć granicę, najpierw dodaj pojemnik „Div” i uzyskać dostęp do niego w CSS za pomocą odpowiedniej klasy. Następnie zastosuj CSS „Radiusz graniczny„Właściwość i dostosuj ją do”50%„Aby stworzyć okrąg i CSS”granica„Własność jest wykorzystywana do ustawienia granicy wokół koła. Ten blog wyjaśnił metodę tworzenia koła z granicami w CSS.