Na naszej stronie internetowej można wykorzystać wiele kształtów, aby stworzyć lepszy projekt, taki jak kręgi, kwadraty, prostokąty i wiele innych. Te kształty można tworzyć przy użyciu różnych właściwości CSS. Mówiąc dokładniej, zaokrąglone zakątki pudełka są bardziej skuteczne niż spiczaste zakątki, ponieważ sprawiają, że nasze oczy łatwo podążają za liniami.

W tym artykule omówiono procedurę korzystania z właściwości CSS Border-Radius do tworzenia pudełek z zaokrąglonymi rogami.

Jak tworzyć pudełka w HTML?

Aby utworzyć dwa pudełka, dodaj dwa elementy klasy klasy z nazwami „Box-1" I "Box-2", i dodaj

element z nagłówkiem w każdym z elementów Div w następujący sposób:

Przykładowe pole 1

Przykładowy pole 2

Teraz zastosuj style CSS do elementów HTML.

Styl Element H1

H1
Wyściółka: 50px;

Element jest dostarczany z właściwością wyściółki jako „50px„Aby utworzyć określoną dodatkową przestrzeń w nagłówku.

Style Box-1 i Box-2 Elementy div

#Box-1,
#Box-2
Margines: 1px Auto;
szerokość: 250px;
Wysokość: 120px;
kolor tła: czekolada;
Rozmiar czcionki: 10px;
Kolor: Ghost White;

Właściwości CSS, które są stosowane do Div Box-1 i Box-2, opisano poniżej:

• "szerokość”Właściwość ustawia właściwość szerokości na 250px.
• "wysokość„Właściwość jest wykorzystywana do ustawienia wysokości elementu na 250px.
• "kolor tła„Właściwość jest wykorzystywana do określenia koloru tła elementu.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawienia rozmiaru czcionki elementu.
• "kolor„Własność jest wykorzystywana do ustawienia koloru czcionki.

Zapewniając wyżej wymieniony kod, utworzone pola zostaną pokazane w następujący sposób:

Można zauważyć, że pudełka są tworzone, ale ich rogi są nadal wskazane. Poniższa sekcja wyjaśni użycie właściwości Radiusa do robienia pudełek z zaokrąglonymi narożnikami.

Co to jest własność CSS Border-Radius?

CSS „Radiusz graniczny„Własność jest wykorzystywana do zdefiniowania promienia elementu. Ta właściwość może składać się z od jednego do czterech wartości. Wartości te są wyjaśnione poniżej.

Składnia- jedna wartość

Border-Radius: All [ / All];

Jedna składnia wartości odnosi się do promienia wszystkich czterech zakątków pudełka.

Składnia3- Dwie wartości

Radiusz graniczny: lewy górne i prawe dolne prawe i dolne lewą
[ / top-lew i prawy dolne prawe i dolne lewy];

Składnia dwóch wartości określa promień jako pierwszą wartość wskazuje promień w lewym i prawym dolnym rogach, a druga wartość określa promień w prawych i dolnych zakątkach.

Składnia- trzy wartości

Radiusz graniczny: lewy górny górny i dolne lewą prawą dolną prawą
[ / lewy górne prawe i dolne lewy dolne prawe];

Trzy Składnia wartości określa pierwszą wartość reprezentuje róg lewej górnej, druga wartość wskazuje rogi górne i dolne, a trzecia wartość dotyczy dolnego narożnika.

Składnia- cztery wartości

Ograniczenie graniczne: lewica górna górna prawna dolna lewica
[ / lewica górna prawna prawna dolna lewy dolna lewica];

Składnia czterech wartości określa, że ​​pierwsza wartość jest stosowana w lewym górnym rogu, druga wartość ma zastosowanie do prawego górnego rogu, trzecia wartość ma zastosowanie do prawego dolnego rogu, a czwarta wartość dotyczy dolnego narożnika w lewym dolnym rogu.

Jak tworzyć zaokrąglone skrzynki narożne za pomocą CSS?

Poniższa sekcja kodu wyjaśnia, w jaki sposób możemy tworzyć okrągłe pola narożne.

Styl Box-1

#Box-1
kolor tła: RGB (255, 183, 0);
RADUM BRANDER: 100px 2px 100px 1px;

Element DIV Box-1 jest stosowany z właściwościami opisanymi poniżej:

• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła elementu.
• "Radiusz graniczny”Z wartością ustawioną jako„100px 2px 100px 1px”Gdzie 100px wskazuje górny róg, 2px wskazuje górny róg, 100px wskazuje róg prawego dolnego, a 1px wskazuje do dolnego lewej rogu.

Styl Box-2

#Box-2
kolor tła: Darkcyan;
Radiusz graniczny: 30px;

Właściwości stosowane do elementu DIV Box-2 opisano poniżej:

• "kolor tła„Właściwość ustawia kolor elementu DIV Box-2 za pomocą„Darkcyan" kolor.
• "Radiusz graniczny„Właściwość z ustawioną wartością jako„30px”Ustawia promień pudełka na 30px ze wszystkich czterech zakątków.

Aby zmienić zakątki pudełka, wartości właściwości promieniowania granicznego można odpowiednio ustalić. Zapewniając powyższe właściwości stylizacji CSS do elementów Div Box-1 i Box-2, wynik będzie wyglądał tak:

Z powodzeniem nauczyliśmy się posiadłości Radiusa, aby zrobić okrągłe zakątki pojedynczych lub wielu pudełek.

Wniosek

Aby stworzyć lepszy projekt dla naszej strony internetowej, można zastosować różne kształty, takie jak koła, kwadraty, prostokąty i inne, można tworzyć za pomocą CSS. Pudełka z zaokrąglonymi narożnikami można tworzyć w CSS, wykorzystując CSS ”Radiusz graniczny" nieruchomość. W tym artykule pokazano zastosowanie promieniowania granicznego CSS do tworzenia pudełek z zaokrąglonymi narożnikami z przykładami.