Zaokrąglone narożniki na prostokątnym obrazie za pomocą CSS
W tym zapisie omówi metodę tworzenia zaokrąglonych zakrętów na prostokątnych obrazach za pomocą CSS.
Jak zrobić zaokrąglone zakątki na prostokątnym obrazie za pomocą CSS?
Aby zrobić zaokrąglone zakątki na prostokątnym obrazie za pomocą CSS, „Radiusz graniczny„Właściwość CSS o wartości”50%”Jest wykorzystywany. Aby uzyskać praktyczne implikacje, wypróbuj instrukcje określone poniżej:
Krok 1: Dodaj kontener DIV
Początkowo dodaj kontener DIV za pomocą „" element. Następnie wstaw „„ID" Lub "klasa”Atrybut i określ nazwę do dalszego użycia.
Krok 2: Dodaj obraz
Aby dodać obrazy w pojemniku, użyj „„Element reprezentujący samodzielną treść. Następnie dodaj „”Element i wstaw następujący atrybut wewnątrz znacznika„ IMG ”:
- „„src”Jest wykorzystywany do dodawania pliku multimedialnego do strony HTML.
- Następnie dodaj "szerokość" I "wysokość”Atrybuty do ustawienia rozmiaru elementu.
Krok 3: Dodaj podpis do obrazu
Następnie wstaw „
Zaokrąglony obraz
Wyjście
Krok 5: Zrób zaokrąglony obraz
Uzyskaj dostęp do obrazu za pomocą „postać”I ustaw różne właściwości CSS wspomniane w poniższym kodzie fragmentu:
postaćszerokość: 200px;
Wysokość: 150px;
Olflow: ukryty;
Margines: 30px 90px;
Radiusz graniczny: 50%;
Tutaj:
- "szerokość" I "wysokość”Są używane do ustawiania rozmiaru obrazu.
- "przelewowy”Własność wskazuje, co powinno się stać, jeśli pudełko elementu jest przepełnione. Aby to zrobić, wartość tego atrybutu jest ustawiona jako „ ukryty".
- "margines”Definiuje przestrzeń wokół granicy elementu.
- "Radiusz graniczny”Oznacza promień narożnika elementu. W tym celu wartość jest ustalana jako „50%„Aby granica jest zaokrąglona.
Wyjście
Krok 6: Zastosuj styl na podpisie
Uzyskaj dostęp do klasy, korzystając z „.podpis”I zastosuj następujące właściwości CSS:
.podpisMargines: 0px 70px;
granica: 3px kropkowana śliwka;
Text-Align: Center;
kolor tła: RGB (209, 180, 236);
Zgodnie z powyższym fragmentem kodu:
- "margines”Określa przestrzeń poza granicą.
- "granica”Definiuje granicę poza elementem.
- "tekst-align„Własność wykorzystywana do ustawiania wyrównania tekstu.
- "kolor tła”Właściwość wskazuje kolor tylnej części elementu.
Wyjście
Chodzi o zrobienie zaokrąglonego rogu na prostokątnym obrazie za pomocą CSS.
Wniosek
Aby zrobić zaokrąglone zakątki na prostokątnym obrazie, najpierw dodaj obraz za pomocą „”Tag. Następnie uzyskaj dostęp do obrazu i zastosuj „Radiusz graniczny„Właściwość CSS o wartości”50%„To okrąża granicę obrazu. Ustaw także „przelewowy" Jak "ukryty". Ten post wyjaśnił metodę robienia zaokrąglonych narożników na prostokątnych obrazach za pomocą tylko CSS.