CSS Styling jest podstawową częścią HTML używanej do przedstawienia strony internetowej. CSS pozwala na różne właściwości stylizacji, z których jednym jest „obraz graniczny" nieruchomość. Za pomocą wspomnianej właściwości możesz ustawić obraz jako granicę elementu HTML zamiast typowego stylu granicznego.

Ten przewodnik pokaże, jak korzystać z właściwości obrazu granicznego CSS.

Jak korzystać z właściwości granicznej CSS?

Właściwość obrazu granicznego służy do ustawienia obrazu jako granicy wokół elementu.

Składnia

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

Image graniczne: stadica źródła / początek szerokości powtórz

Image graniczne to skrót od CSS o pięciu różnych właściwościach, takich jak:

• border-Image-Source: Służy do określenia źródła obrazu.
• border-Image-Slice: Służy do wycięcia obrazu granicy.
• Border-Image szerokość: Jest wykorzystywany do ustawiania szerokości granicy.
• Outset z obrazem granicznym: Służy do ustawiania ilości miejsca, w którym obraz graniczny odbiera z ramki granicznej.
• powtórka graniczna: Służy do uniknięcia powtarzania obrazu granicznego i wypełnienia obszaru granicznego.

Notatka: Jeśli określamy tylko źródło obrazu zamiast wszystkich wartości, granica obrazu jest ustawiana zgodnie z domyślnymi wartościami tych właściwości.

Aby doskonale zrozumieć, przejdź do praktycznego przykładu własności granicznej.

Przykład: Ustawienie obrazu jako granicy z właściwością obrazu granicznego

Aby utworzyć granicę obrazu wokół elementu, najpierw dodaj element w pliku HTML. Aby to zrobić, utworzymy a i przypisujemy „granica„Klasa do tego. Następnie dodamy nagłówek i akapit za pomocą

I

tagi.

Html

Linuxhint

Granica obrazu

Teraz przenieś się do CSS i zastosuj właściwość obrazu granicznego do utworzonego pojemnika.

Tutaj użyliśmy „.granica„Aby uzyskać dostęp do DIV utworzonego w HTML. Następnie zastosujemy „granica„Własność do niego i ustaw wartości granicy jako„30px" I "solidny”Odpowiednio. W następnym kroku użyjemy „obraz graniczny„Właściwość i ustaw wartości źródła, plasterek, szerokości, odległości i powtarzaj jako„obraz.jpg”,„50”,„30px”,„40px", I "okrągły". Ponadto przypisamy wartość właściwości tekstowej jako „Centrum”, Własność wielkości czcionki jako„50px”I kolorowe właściwość jako„RGB (3, 59, 7)„Aby stylizować nagłówek i akapit.

CSS

.granica
Border: 30px stały;
Image graniczne: URL („Zdjęcie.jpg ') 50 / 30px 40px runda;
Text-Align: Center;
Rozmiar czcionki: 50px;
Kolor: RGB (3, 59, 7);

Po wdrożeniu wyżej wymienionego kodu przejdź do pliku HTML i wykonaj go. W rezultacie zobaczysz następujące dane wyjściowe:

Powyższy obraz wskazuje, że właściwość graniczna jest z powodzeniem wdrażana.

Przykład 2: Ustawienie obrazu jako granicy z wartościami domyślnymi właściwości obrazu granicznego

W tym przykładzie określamy tylko źródło obrazu i sprawdzimy jego wpływ na właściwość obrazu obrazu.
Tutaj przypisamy źródło obrazu tylko jako „obraz.jpg„Do własności granicznej. Pozostałe właściwości będą takie same, zgodnie z poprzednim przykładem.

CSS

.granica
Border: 30px stały;
Image graniczne: URL („Zdjęcie.jpg ');
Text-Align: Center;
Rozmiar czcionki: 50px;
Kolor: RGB (3, 59, 7);

Wyjście

Tutaj widzimy, że granica obrazu jest umieszczana tylko w rogach div. To dlatego, że „obraz graniczny”Właściwość wykorzystuje predefiniowane wartości dla wszystkich pozostałych parametrów.

Wniosek

„„obraz graniczny„Właściwość służy do ustawienia obrazu jako granicy wokół dowolnych elementów HTML. Możesz ustawić różne wartości właściwości granicznej do stylizacji granicy. Jeśli nie określisz żadnych wartości jego parametrów, właściwość obrazu obrazu zastosuje swoje domyślne zachowanie. W tym artykule wyjaśniliśmy, jak dodać obraz jako granicę za pomocą właściwości obrazu granicznego.