Okrągłe krawędzie CSS
Przykład nr 01:
Wokół krawędzi dowolnych obrazów lub niektórych akapitów. Rozpoczęliśmy kod HTML przy użyciu podstawowego znacznika HTML, a następnie znacznika głowy. Główny znacznik zawiera tag tytułowy, który został użyty do nadania tytułu na stronie internetowej jako „zaokrąglone krawędzie lub zakręty CSS”. W ramach ciała dokumentu HTML używamy nagłówka o rozmiar 1, który nie będzie używany do okrążenia narożników. Używanie znacznika akapitów „P” wykorzystywano trzy akapity.
Pierwsze dwa akapity zostały określone z 2 różnymi klasami: a i b. Trzeci akapit został określony z identyfikatorem „C”. Wszystkie te trzy akapity zawierają zdania, które mogą być używane jako treść akapitu. Te akapity można wyświetlić za pomocą zaokrąglonych krawędzi na stronie HTML. Rzućmy okiem na CSS tej strony. W ramach stylu tego skryptu HTML określiliśmy klasy A i B dla dwóch pierwszych akapitów, które osobno stylizowały oba, podczas gdy identyfikator „C” jest używany ze znakiem skrótu, który ma być stylizowany osobno.
Używamy właściwości promienia granicznego do pierwszej klasy „A”, aby dodać promień 25 pikseli, a tło byłoby zabarwione, niebo błękitne. Własność promienia granicznego została również użyta w drugiej klasie, aby dodać promień graniczny 45 pikseli z dwoma pikselami stałej granicy. W obu pierwszych klasach używamy 20-pikselowych szerokości 200 pikseli i wysokości 50 pikseli. Z drugiej strony, trzeci identyfikator akapitu został użyty do dodania promienia 90 pikseli wokół niego.
Korzystając z właściwości tła, obraz został dodany jako tło. Oprócz tego właściwość pozycji tła została użyta do ustawienia tła obrazu, a właściwość powtarzania tła została ustawiona na powtórzenie. Ze względu na użycie tej właściwości obraz tła można powtórzyć tyle razy. Wyściółka, wysokość i szerokość byłyby tak samo cytowane, jak użyliśmy w dwóch powyższych stylach dla akapitów. Kod jest teraz zakończony i możemy uruchomić go w kodzie Visual Studio za pomocą menu „Uruchom” swojego paska zadań, a następnie opcję „Rozpocznij debugowanie”.
Wyjście tego kodu HTML zostało wyświetlone w przeglądarce Chrome. Pierwsze dwa akapity zostały stylizowane w promieniu granicznym odpowiednio 25 pikseli i 45 pikseli. Oba akapity zawierają różne tła o dość tym samym wyściółce, szerokości i wysokości. Widać, że krawędzie obu promienia akapitu zostały zaokrąglone.
Ponadto trzeci akapit został wyświetlony w promieniu okręgu 90 pikseli, podczas gdy obraz używany jako tło był wielokrotnie powtarzany.
Przykład nr 2:
Musimy zainicjować ten przykład za pomocą głównego znacznika HTML i znacznika głowy. Tag tytułowy został użyty do nadania tytułu tej stronie HTML jako „zaokrąglonych krawędzi CSS”. Patrząc na znacznik ciała tego skryptu HTML, znaleźliśmy pojedynczy nagłówek rozmiaru 1 z prostym tytułem tekstu. Ta strona HTML zawiera łącznie 5 akapitów za pomocą znaczników lub elementów akapitowych. Pierwszy akapit pokazuje, że będzie to zawierało promień graniczny 50 pikseli, a kształt zaćmienia zostanie utworzony.
Drugi akapit nie używa tylko identyfikatora „zaćmienia”. Wszystkie pozostałe trzy akapity zawierają własne określone klasy: cztery, trzy i dwa, wraz z niektórymi zdaniami pokazującymi wartości promieniowania granicznego użyte do tworzenia różnych zaćmień dla poszczególnych akapitów. Te akapity pokazałyby całkowitą liczbę zaokrąglonych zakrętów. Identyfikator „zaćmienia” dla pierwszego akapitu został użyty do stylizacji pierwszego akapitu w zaćmieniu. Określaliśmy promień graniczny 50%, tło żółtego zielonego koloru, wyściółka 10 pikseli, szerokość 110 pikseli i wysokość 50 pikseli dla pierwszego akapitu. Następnie korzystaliśmy z klasy trzeciego akapitu, „cztery”, aby zaokrąglić cztery zakątki akapitu. W tym celu użyliśmy właściwości promienia granicznego dla górnej, dolnej, lewej i prawej krawędzi akapitu. Określiliśmy tło jako burlywood, z wyściółką 15 pikseli, szerokością 200 pikseli i wysokością 40 pikseli.
Oznacza to, że wszystkie cztery rogi lub krawędzie trzeciego akapitu zostaną zaokrąglone. Aby czwarty akapit został zaprojektowany przez klasę „trzy”, trzy z jej narożników lub krawędzi zostaną zaokrąglone, podczas gdy ten pozostałby niezmieniony. Tło zostało określone jako złoto, podczas gdy wyściółka, szerokość i wysokość byłyby takie same, jak użyliśmy do trzeciego akapitu. Używamy klasy „dwóch” do piątego akapitu, aby zaokrąglić dwa rogi. Ten sam wyściółka, szerokość i wysokość byłyby używane, podczas gdy kolor byłby inny dla tego akapitu. Pierwszy akapit nie wyświetlałby żadnych zaokrąglonych krawędzi, ponieważ nie zawiera dla niego żadnej stylizacji. Zapiszmy ten skrypt HTML i wykonaj go za pomocą kodu Visual Studio za pomocą opcji debugowania rozpoczęcia.
Wyjście tego programu HTML pokazuje, że pierwszy akapit nie zawiera żadnych zaokrąglonych krawędzi, ponieważ przegapiliśmy styl tego akapitu. Z drugiej strony wszystkie cztery akapity zostały zaprojektowane i dostaliśmy zaokrąglone krawędzie dla wszystkich.
Wniosek
Chodzi o użycie właściwości promienia granicznego do zaokrąglenia krawędzi dowolnego elementu HTML w skrypcie HTML. W tym celu wykorzystaliśmy przykłady HTML w bardzo prosty i wykwintny sposób. Z pierwszym przykładem wykazaliśmy zastosowanie właściwości promienia granicznego do zaokrąglenia wszystkich krawędzi jednego elementu lub obrazu jednocześnie bez określenia krawędzi. Z drugiej strony w drugim przykładzie określiliśmy zastosowanie różnych narożników lub krawędzi do zaokrąglenia tych krawędzi lub narożników odpowiednio za pomocą różnych wartości.