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: Tutaj: 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: Zgodnie z powyższym fragmentem kodu: 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.
szerokość: 200px;
Wysokość: 150px;
Olflow: ukryty;
Margines: 30px 90px;
Radiusz graniczny: 50%;
Margines: 0px 70px;
granica: 3px kropkowana śliwka;
Text-Align: Center;
kolor tła: RGB (209, 180, 236);