Zaokrąglony narożnik CSS
Przykład 01: Za pomocą znacznika stylu CSS w pliku HTML do utworzenia przycisku zaokrąglonego narożnika
W tym przykładzie użyjemy podejścia CSS Style Tag, aby utworzyć zaokrąglony przycisk narożny w pliku HTML. Domyślny element przycisku języka znacznika hipertekstu zostanie przebudowany w przycisku z kolorem i okrągłymi granicami w tym przykładzie. Spójrzmy na skrypt, który utworzymy, aby wykonać to zadanie:
W danym skrypcie otwieramy nasz nagłówek plików. W nagłówku pliku definiujemy styl elementu przycisku. W tym celu otwieramy tag stylu i wywołujemy klasę przycisków, w której definiujemy kilka właściwości stylizacji. Pierwszą właściwością byłby promień graniczny przycisku, który tworzy granicę przycisku z okrągłymi narożnikami. Następnie dodajemy kolor do tła przycisku za pomocą właściwości koloru tła. Następnie definiujemy szerokość i wysokość przycisku w pikselach, a następnie zamykamy styl i znaczniki głowy. Teraz otwieramy znacznik ciała i podajemy nagłówek na stronę za pomocą znacznika H1. Następnie otwieramy znacznik przycisku i wywołujemy klasę przycisku wewnątrz znacznika. To odziedziczy wszystkie właściwości stylistyczne zdefiniowane w stylu. Następnie zamykamy wszystkie tagi i zapisujemy plik, aby otworzyć go w naszej przeglądarce.
W poprzednim wyjściu widzimy, że przycisk ma zaokrąglone narożniki ze względu na styl CSS, który określliśmy w klasie przycisków. Teraz zmieniamy właściwość Radia granicznego i obserwujemy zmianę granicy przycisku.
Teraz zwiększamy długość piksela promienia granicy w poprzednim skrypcie i nie wprowadzamy żadnych innych zmian. Po zapisaniu i otwarciu tego pliku otrzymamy następujące dane wyjściowe:
Widzimy, że przycisk w danym wyjściu ma całkowicie okrągłe końce i różni się od poprzedniej wersji, gdy promień granicy został zwiększony w skrypcie.
Przykład 02: Używanie wbudowanego CSS do zrobienia przycisku z zaokrąglonymi narożnikami
W tym przykładzie zostanie przyjęte wbudowane podejście CSS, aby przekształcić domyślny przycisk, podając go za pomocą okrągłych granic i dodając kolor do tła. W tym przykładzie dodamy styl w tym przykładzie, jak pokazano w następującym fragmencie:
W danym skrypcie rozpoczynamy kod od znacznika ciała, ponieważ w tym scenariuszu nie ma użycia nagłówka pliku. W znaczniku ciała dodajemy nagłówek najpierw do strony, otwierając znacznik H1, a następnie przechodzimy do znacznika przycisku. W tym znaczniku piszemy właściwości stylizacji za pomocą słowa kluczowego CSS „Styl”. Pomiędzy odwróconymi przecinkami, właściwości są przypisane, oddzielone przez półkolony. Pierwszą właściwością jest promień graniczny, a jej wartość to „10px”. Następnie przypisujemy kolor tła i przypisujemy wysokość i szerokość przycisku. Następnie zamykamy przycisk i znaczniki nadwozia, aby zakończyć plik. A następnie zapisz go w „.Format pliku html ”, abyśmy mogli otworzyć go w naszej przeglądarce.
Wyjście pokazuje, że przekształciliśmy domyślny przycisk, nadając mu okrągłe obramowanie i białe tło za pomocą wbudowanego CSS wewnątrz znacznika przycisku.
Przykład 03: Korzystanie z różnych właściwości związanych z promieniem granicznym w CSS na przycisku
W tym przykładzie użyjemy różnych właściwości związanych z promieniem granicznym, który zapewnia CSS w odniesieniu do perspektywy pozycjonowania. Omówimy te różne właściwości i zaimplementujemy je w następującym skrypcie dla pliku HTML:
W poprzednim skrypcie dodajemy cztery różne właściwości dotyczące promienia granicy, które są lewym górnym, prawym górnym, dolnym lewym i prawym dolnym prawym. Wszystkie te właściwości reprezentują cztery strony granicy przycisku, a CSS pozwala nam edytować każdą stronę granicy, osobno. Tak więc przypisujemy lewą stronę granicy przycisku o podobnych wartościach promienia i prawej stronie granicy przycisku o podobnych wartościach promienia. To stworzy dwa różne kształty graniczne po obu stronach granicy przycisku. Następnie dodajemy również kolor do tła przycisku i przypisujemy stałą szerokość i wysokość dla elementu przycisku. Następnie podajemy stronę nagłówek w znaczniku ciała i tworzymy również przycisk w znaczniku ciała. Tag przycisku odziedziczy klasę tagów stylów, która ma wszystkie różne właściwości stylizacji do tworzenia unikalnego kształtu obramowania przycisku.
Po otwarciu poprzedniego pliku skryptu w naszej przeglądarce otrzymamy dany wynik. Jak widzimy, przycisk ma dwa różne style granicy po obu stronach. Stało się tak, ponieważ przypisaliśmy różne wartości promienia granicy dla obu stron przycisku.
Przykład 04: Korzystanie z CSS do zmiany zakątków przycisku, gdy zostanie on unoszący się
W tym przykładzie zmienimy granicę przycisku, gdy zostanie on unoszący się. Podejście CSS w stylu zostanie nastąpi, aby stworzyć efekt najemnika na przycisku. W tym przykładzie utworzymy osobną klasę i określoną funkcję, którą należy odziedziczyć.
W tym skrypcie tworzymy klasę stylizacji w nagłówku pliku dla elementu przycisku. Następnie tworzymy nową funkcję właściwości dla tej klasy o nazwie „Watch”. W tej funkcji ustawiamy promień granicy na „10px”, co wynika z animacji przejścia granicy na okrągłą granicę. Teraz zamykamy nagłówek tagu po ukończeniu wszystkich właściwości związanych z stylem. W znaczniku ciała tworzymy nagłówek za pomocą znacznika H1 i otwiera również znacznik przycisku. W tym znaczniku przycisku używamy klasy przycisku z nagłówka pliku, aby odziedziczyć wszystkie właściwości formatowania. Po zapisaniu pliku otwieramy go w naszej przeglądarce.
Wyjście pokazuje efekt po uderzeniu na przycisk, ponieważ został zdefiniowany w klasie stylistycznej i jego funkcji.
Wniosek
W tym artykule omówiliśmy kilka podejść do utworzenia przycisku z zaokrąglonymi narożnikami przy użyciu różnych stylów CSS, które są wbudowanym CSS i stylem CSS. W tym artykule zaobserwowaliśmy różne właściwości związane z tym zjawiskiem. I wdrożył te różnice w notatniku ++, aby zrozumieć lepsze zrozumienie tej koncepcji.