Jak dostosować szerokość graniczną za pomocą CSS

W HTML granice są zaprojektowane w celu tworzenia różnic między dwiema sekcjami i stylizowania elementu. W tym celu „granica„Wykorzystana jest własność CSS. Ta właściwość pozwala dostosować szerokość, styl i kolor granicy. Szerokość granicy zależy od wyglądu elementu, w którym stosujemy tę właściwość.

W tym podręczniku dowiemy się, jak dostosować szerokość granicy.

Zaczynajmy!

Czym jest nieruchomość „graniczna” w CSS?

W HTML, aby zaprojektować granicę wokół elementu, „granica„Własność jest używana. Zasadniczo jest to krótka własność „szerokość granicy”,„styl graniczny", I "kolor ramki". Jest wykorzystywany do ustawiania szerokości granicy, stylu granicy i koloru granicy.

Składnia właściwości granicznej to:

Border: Kolor stylu szerokości

Oto opis danych wartości:

• • szerokość: Służy do dostosowania szerokości granicy.
  • styl: Jest wykorzystywany do stylizacji granicy, takiej jak stały, grzbiet lub podwójny.
  • kolor: Służy do zmiany koloru granicy.

„„granica„Własność zostanie wdrożona w poniższym przykładzie.

Przykład: Utwórz granicę za pomocą CSS

W tym przykładzie utworzymy granicę wokół sekcji HTML i przypisamy klasę „granica„Do tego. Wewnątrz sekcji dodamy akapit za pomocą

etykietka:

„Sukces nie jest ostateczny; porażka nie jest śmiertelna:
Liczy się odwaga, aby kontynuować.„ - Winston S. Churchill

Następnie przejdziemy do CSS i dostosujemy długość granicy za pomocą „granica" nieruchomość.

Tutaj użyjemy „.granica„Aby uzyskać dostęp do klasy, którą przypisaliśmy do sekcji. Ustawiliśmy wartość szerokości „5px”, Styl„solidny", i kolor "RGB (142, 26, 153)". Na koniec kolor tła sekcji jest określony jako „Reg (214, 159, 181)”:

.granica
granica: 5px Solid RGB (142, 26, 153);
kolor tła: RGB (214, 159, 181);

Kiedy wszystko jest gotowe, wykonaj plik HTML, aby zobaczyć następujące dane wyjściowe:

Notatka: Możesz także zwiększyć lub zmniejszyć szerokość zgodnie z preferencjami.

Przykład 2: Dostosuj szerokość obramowania wokół obrazu

W tym przykładzie dostosujemy szerokość graniczną wokół obrazu. Aby to zrobić, dodamy obraz za pomocą znacznika w pliku HTML:

Teraz przejdź do pliku CSS i ustaw szerokość granicy, styl, kolor jako „10px”,„rowek”,„RGB (255, 0, 0)”Odpowiednio:

img
granica: 10px rowek RGB (255, 0, 0);

Da nam następujące dane wyjściowe:

Notatka: W "granica„Własność, zawsze musisz przypisać wartość dodatnią do szerokości.

Zaproponowaliśmy metodę dostosowania szerokości granicy wokół dowolnego elementu.

Wniosek

W CSS, aby dostosować granicę wokół elementu, „granica”Nieruchomość jest wykorzystywana. Możesz zwiększyć i zmniejszyć szerokość granicy zgodnie z wymaganym wyglądem elementów. W tym artykule wyjaśniliśmy, jak dostosować szerokość obramowania za pomocą „granica”Własność i podaj różne przykłady.