Granice w CSS | Wyjaśnione

Kiedy odwiedzamy stronę internetową, czasami byliśmy świadkami pięknych ramek wokół tekstu, które ulepszają interfejs użytkownika i pomaga poprawić interaktywność treści. W CSS ramy te są określane jako granice i odgrywają znaczącą rolę w projektowaniu stron internetowych. CSS zapewnia wiele właściwości granicznych, które pozwalają nam ustawić styl, szerokość granicy itp.

Ten zapis przedstawia obszerny przegląd następujących nieruchomości granicznych:

• styl graniczny: używany do ustawiania stylu granicy, taki jak kropek, solidny itp.
• kolor ramki: używane do ustawiania koloru granicy jak czerwony, #00FF00 itp.
• szerokość granicy: używane do ustawiania szerokości granicy, takiej jak gruby, cienki, piksel itp.

W tym artykule wyjaśniono, jak korzystać z każdej z wyżej wymienionych nieruchomości za pomocą przykładów.

Nieruchomość w stylu granicznym CSS

Właściwość, która określa, jak wyglądają granicy. Właściwość graniczna CSS zapewnia następujące wartości:

• ukryty: Ustaw ukrytą granicę.
• solidny: Ustaw granicę linii stałej.
• kropkowany: określ obramowanie kropkowane.
• przeszyty: Ustaw przerywaną granicę.
• podwójnie: Ustaw obramowanie podwójnej linii.
• rowek: określa granicę rowkową 3D.
• grzbiet: zestaw granicy grzbietu 3D.
• wstawka: określa granicę wstawki 3D
• początek: Służy do ustawiania granicy 3D

Notatka: Efekt 3D groove, grzbietu, wstawki i początkowego zależy od wartości koloru granicy.

Przykład Poniższy kod tworzy wiele akapitów i wdraża wszystkie wyżej wymienione wartości, aby pokazać skutki każdej właściwości w stylu granicznym CSS:

Html

Akapit z ukrytą granicą

Akapit z solidną granicą

Akapit z kropkowaną granicą

Akapit z przerywaną granicą

Akapit z podwójną granicą

Akapit z granicą groove

Akapit z granicą grzbietu

Akapit z wstawką graniczną

Akapit z granicą na początku

CSS

.Hidden-Border
Wyściółka: 0;
Styl graniczny: ukryty;

.Solid-Border
Wyściółka: 0;
Styl graniczny: solidny;

.curnder
Wyściółka: 0;
Styl graniczny: kropkowane;

.przerywany alborder
Wyściółka: 0;
Styl graniczny: przerywany;

.podwójny granica
Wyściółka: 0;
Styl graniczny: podwójny;

.Groove-Border
Wyściółka: 0;
Styl graniczny: groove;

.Ridge-Border
Wyściółka: 0;
Styl graniczny: grzbiet;

.INSET-BORDER
Wyściółka: 0;
Styl graniczny: wstawka;

.Zarusza BORDER
Wyściółka: 0;
Styl graniczny: Początek;

Powyższy kod wygeneruje następujące dane wyjściowe:

Własność granicowa CSS

Jak wskazuje sama nazwa, pozwala nam określić kolor granicy. Kolor można określić przy użyciu predefiniowanych nazw kolorów, wartości szesnastkowych itp. Kolor każdej strony można modyfikować indywidualnie za pomocą właściwości granicznej, koloru granicznego, koloru granicznego i koloru granicznego.

Przykład Rozważmy poniżej dany kawałek kodu, który określa kolor graniczny za pomocą kodu szesnastkowego:

Html

Prosty przykład w kolorze granicznym.

CSS

P
Styl graniczny: przerywany;
kolor graniczny: #00f;

Powyższy kod wygeneruje następujący kod:

Rozszerzmy powyższy kod nieco na kolor każdej strony granicznej inaczej.

Html

Prosty przykład w kolorze granicznym.

CSS

P
Styl graniczny: przerywany;
kolor graniczny: #00f;
kolor graniczny: #F00;
kolor graniczny: #000;
kolor graniczny: #0f0;

Otrzymamy następujące dane wyjściowe:

Własność granicowa CSS

Właściwość szerokości granicznej służy do ustawienia szerokości granicy. Właściwość szerokości granicy pobiera wartości pod względem pikseli, albo predefiniowanej wartości, takiej jak gruby, cienki itp.

Przykład Rozważmy poniższy kod, który określa szerokość granicy jako 2 piksele:

Html

Prosty przykład szerokości granicznej.

CSS

P
Styl graniczny: solidny;
szerokość graniczna: 2px;

Otrzymamy następujące dane wyjściowe:

Własność CSS Border-Radius

Właściwość Radiusza granicznego określa zaokrągloną obramowanie do elementu, a długość określa kształt jego narożników.

Przykład Rozważmy poniższy kawałek kodu, który określa promień graniczny jako 10 pikseli:

Html

Prosty przykład promieniowania granicznego.

CSS

P
granica: 2px stały;
RADIUS BRAVES: 10px;

Wyjście

Wyjście weryfikuje, że właściwość Border-Radius zapewnia zaokrąglony kształt w rogu granicy:

CSS Border Stenothand Property

CSS zapewnia krótką nieruchomość dla szerokości granicy, stylu i koloru, który pozwala nam wdrożyć wszystkie te właściwości graniczne w jednej linii.

Przykład

W poniższym kodzie wdrażamy wiele właściwości w jednej linii CSS za pomocą właściwości stenograficznej:

Html

Prosty przykład skrótów granicznych.

CSS

P
Border: 3Px stały niebieski;

Zamiast wdrażania każdej właściwości granicznej indywidualnie, powyższy kod wdraża szerokość granicy,

Wyjście zweryfikowało, że nieruchomość skrótów zaimplementowała wszystkie trzy właściwości graniczne pomyślnie.

Wniosek

CSS zapewnia szerokość graniczną, styl graniczny i kolory graniczne do ustawiania szerokości granicy, stylu granicznego i koloru granicznego elementu HTML. Ten zapis zawiera kompleksowy przegląd granic CSS i omawia, jak utworzyć granicę, ustawić kolor graniczny, zmodyfikować styl granicy i ustawić szerokość graniczną za pomocą prostych i łatwych do zrozumienia przykładów.