Styl strony internetowej HTML jest kontrolowany przez CSS, który jest również podstawową częścią HTML. Jedną z właściwości stylizacji dostarczonej przez CSS jest „granica" nieruchomość. Głównie graniczne są tworzone poza elementami, ale CSS pozwala nam wstawić granicę do elementu za pomocą różnych właściwości, które są shadowami, zarysami i rozmiarami pudełka.

W tym artykule dowiemy się procedury umieszczania granic w Div za pomocą:

• właściwość pudełka
• Zarys z właściwością Ofline Offset
• właściwość rozmiaru pudełka

A więc zacznijmy!

Metoda 1: Umieść granicę wewnątrz Div przy użyciu właściwości „pudełko-shadow”

Możemy umieścić granicę wewnątrz div za pomocą „Shadow Box" nieruchomość. Najpierw przejdź przez właściwość Box-Shadow i jej funkcjonalność.

Czym jest właściwość „pudełka”?

W CSS „Shadow Box„Właściwość pozwala nam ustawić cień na dowolny element lub obraz. Ta właściwość opiera się na następujących wartościach:

• Offset-X: Służy do dodawania poziomego cienia.
• Offset-y: Służy do dodawania pionowego cienia.
• kolor: Jest wykorzystywany do umieszczenia koloru cienia.

Składnia

Aby wyjaśnić te punkty, przejdźmy do składni właściwości Box-Shadow:

Box-shadow: offset-X Offset-y-radyk-promień rozkładany kolor kolorów;

Oto opis związany z wyżej wymienionymi wartościami:

• "Offset-x" I "Offset-y”Może być pozytywne lub negatywne.
• "Blur-Radius”Sprawia, że ​​cień jest jaśniejszy lub jaśniejszy.
• Używając "rozpowszechnianie się”, Możesz ustawić rozmiar cienia.
• W miejscu "kolor”, Przypisasz dowolny kolor, który chcesz podać obrazowi.
• "wstawka”Służy do ustawienia cienia wewnątrz elementu. Jeśli go nie użyjesz, cień pojawi się poza pudełkiem.

Notatka: "Blur-Radius”,„rozpowszechnianie się", I "wstawka”To opcjonalne wartości właściwości pudełkowej. Możesz użyć tych wartości w niektórych specjalnych przypadkach.

Aby uzyskać lepsze zrozumienie użycia właściwości pudełkowej, wdrożmy praktyczny przykład.

Przykład

W sekcji HTML utworzymy pojemnik za pomocą znacznika i nagłówka

w środku tego.

Html

„Solidna granica wewnątrz div”

Następnie w pliku CSS użyjemy „div„Aby uzyskać dostęp do już utworzonej div i umieścić granicę wewnątrz, postępuj zgodnie z danymi instrukcjami:

• Ustaw szerokość i wysokość Div jako „700px" I "250px".
• Określ kolor tekstu jako „RGB (13, 214, 214)".
• Ustaw wartości wyrównania tekstu za pomocą właściwości wysokości linii jako „200px”I właściwość Align i tekst jako„Centrum".
• Korzystając z właściwości tła, ustaw kolor tła Div jako „czarny".
• Utwórz granicę za pomocą nieruchomości granicznej z „15px" szerokość, "solidny”Kształt i„czarny" kolor.
• Do Inside Shadow użyj „Shadow Box”Właściwość i ustaw wartość offset-x, przesunięcia-y i rozmycia jako„0px”, Rozprzestrzeniaj się jako„5px”, Kolor cienia jako„RGB (255, 251, 0)" I użyć "wstawka„Umieścić granicę wewnątrz Div.

CSS

div
szerokość: 700px;
Wysokość: 250px;
Kolor: RGB (255, 238, 0);
Wysokość linii: 200px;
Text-Align: Center;
Tło: czarny;
Border: 15px Solid Black;
Box-shadow: 0px 0px 0px 5px RGB (255, 238, 0) wstawka;

Notatka: Wartość przesunięcia-X i przesunięcia Y jest ustawiona jako 0, ponieważ potrzebujemy granic ze wszystkich stron Div.

Po wdrożeniu danego kodu przejdź do pliku HTML i wykonaj go, aby zobaczyć następujący wynik:

Notatka: Zwiększając wartość „rozpowszechnianie się”, Możesz zwiększyć szerokość granicy.

Metoda 2: Umieść granicę wewnątrz div przy użyciu właściwości „Zarys” i „Ofline”

„„zarys„Właściwość służy do ustawienia linii poza elementem. Jest to krótka własność „Ostra zarys”,„styl zarysu", I "Kolor zarysowy". Składnia właściwości zarysowej jest następująca:

Zarys: Kontur zarys obrysu koloru konspektu

Oto opis związany z wyżej wymienionymi wartościami:

• PRZYJACIE ZAREMUJĄCA: Służy do ustawienia szerokości konturu.
• styl konturu: Służy do ustawienia stylu konturu.
• kolor kontur: Jest wykorzystywany do określenia koloru konturu.

Podobnie „„ „Offset zarys„Właściwość służy do ustawienia przestrzeni między krawędzią elementu a konturem. Ta przestrzeń jest przezroczysta. Składnia właściwości Ofline Offset to:

Offset zarys: wartość

W miejscu wartości możesz ustawić przestrzeń, którą chcesz ustawić między krawędzią elementu a konturem. Tworzy zarys wewnątrz elementu, gdy określona jest wartość ujemna.

Przejdźmy do przykładu tworzenia granicy wewnątrz Div.

Przykład

W tym przykładzie utworzymy dwa Divy z nazwami klas „div1" I "div2”I dodaj nagłówek w nim za pomocą

etykietka.

Html

„Granica grzbietu wewnątrz div”

„Podwójna granica wewnątrz div”

W CSS użyj „div1„Aby uzyskać dostęp do kontenera, który utworzyliśmy w pliku HTML. Aby wstawić granicę wewnątrz div, postępuj zgodnie z podanymi instrukcjami:

• Ustaw szerokość i wysokość Div jako „500px".
• Dostosuj promień granicy, aby „50%".
• Ustaw kolor tekstu jako „RGB (13, 214, 214)".
• Ustaw wartości wyrównania tekstu za pomocą właściwości wysokości linii jako „500px”I właściwość Align i tekst jako„Centrum".
• Korzystając z właściwości tła, ustaw kolor tła Div jako „czarny".
• Utwórz granicę za pomocą nieruchomości granicznej jako „15px”,„solidny", I "czarny".
• Do wewnętrznej granicy użyj „zarys”Właściwość i ustaw wartość jako„10px”,„grzbiet", I "RGB (0, 255, 242)”I ustaw wartość„Offset zarys" Jak "-25px„Aby umieścić granicę wewnątrz Div.

CSS

.div1
szerokość: 500px;
Wysokość: 500px;
Radiusz graniczny: 50%;
Kolor: RGB (13, 214, 214);
Wysokość linii: 500px;
Text-Align: Center;
Tło: czarny;
Zarys: 10px Ridge RGB (0, 255, 242);
Ofline Offset: -25px;

W przypadku stylizacji drugiej div zmień tylko styl konturu za pomocą „zarys„Właściwość i ustaw wartości w następujący sposób:

Zarys: 10px podwójny RGB (0, 255, 242);

Metoda 3: Umieść granicę wewnątrz div przy użyciu właściwości „rozmiaru”

CSS „rozmiar pudełka”Właściwość oblicza szerokość i wysokość elementu. Składnia właściwości rozmiaru pola to:

Rozmiar pola: wartość

W miejscu wartości możesz ustawić wartość rozmiaru pudełka jako „Content-box" I "Box-box".

Przykład

W poniższym przykładzie utworzymy nazwę klasy DIV „div1”I dodaj nagłówek w nim.

Html

„Groove granica wewnątrz div”

W CSS użyjemy „div1„Aby uzyskać dostęp do utworzonej div. Następnie wstaw granicę wewnątrz Div w następujący sposób:

• Ustaw szerokość i wysokość Div jako „550px".
• Ustaw kolor tekstu jako „RGB (2, 255, 137)".
• Ustaw wartości wyrównania tekstu za pomocą właściwości wysokości linii jako „420px”I właściwość Align i tekst jako„Centrum".
• Korzystając z właściwości tła, ustaw kolor tła Div jako „czarny".
• Utwórz granicę za pomocą właściwości granicznych jako „50px”,„rowek", I "RGB (81, 255, 0)".
• Następnie użyj „granica”Właściwość i ustaw wartość jako„50px”,„rowek", I "RGB (81, 255, 0)”I ustaw wartość„rozmiar pudełka" Jak "Box-box„Aby umieścić granicę wewnątrz Div.

.div1
szerokość: 550px;
Wysokość: 550px;
Kolor: RGB (2, 255, 137);
Wysokość linii: 420px;
Text-Align: Center;
Tło: czarny;
granica: 30px rowek RGB (81, 255, 0);
Rozmiar pola: granica;

Po wdrożeniu danego kodu zobaczysz następujące dane wyjściowe:

Zapewniliśmy trzy najłatwiejsze sposoby umieszczenia granicy z Div za pomocą CSS.

Wniosek

Aby umieścić granicę wewnątrz div, najpierw stwórz granicę za pomocą „granica„Własność, a następnie użyj„Shadow Box" I "zarys" z "Offset zarys" I "rozmiar pudełka„Właściwości CSS. Właściwość graniczna tworzy granicę wokół elementu, a pozostałe cztery właściwości można wykorzystać do przeniesienia granicy wewnątrz Div. W wyniku tego artykułu pokazaliśmy trzy najłatwiejsze metody umieszczania granic w Div.
Aby umieścić granicę wewnątrz div, najpierw stwórz granicę za pomocą „granica„Własność, a następnie użyj„Shadow Box" I "zarys" z "Offset zarys" I "rozmiar pudełka„Właściwości CSS. Właściwość graniczna tworzy granicę wokół elementu, a pozostałe cztery właściwości można wykorzystać do przeniesienia granicy wewnątrz Div. W wyniku tego artykułu pokazaliśmy trzy najłatwiejsze metody umieszczania granic w Div.