W HTML, aby narysować lub umieścić granice w pojemniku Div, istnieje prosta metoda. Użytkownicy mogą korzystać z CSS ”granica”Właściwość i przesuń ją w pudełku elementu za pomocą CSS”Shadow Box„Własność o wartości wstawkowej i ustaw wartość. Ponadto, "rozmiar pudełka”Jest wykorzystywany do zdefiniowania rozmiaru pudełka i wartości„Box-box”Obejmuje wyściółkę i obramowanie w szerokości i wysokości elementu.

Ten post wyjaśni procedurę umieszczania granicy w Div, a nie na jej krawędzi.

Jak umieścić granicę w Div, a nie na jego krawędzi?

Aby umieścić granicę wewnątrz Div, a nie na jej krawędzi, wypróbuj wspomnianą procedurę.

Krok 1: Wstaw nagłówek

Najpierw dodaj nagłówek za pomocą znacznika nagłówka z „

" Do "

". Aby to zrobić,

Tag jest używany:

Linuxhint Ltd UK

Krok 2: Zrób kontener DIV

Następnie skorzystaj z „„Tag, aby zrobić pojemnik. Włóż także atrybut klasy do znacznika otwierającego div. Użytkownicy mogą również dodawać wiele atrybutów klas w pojedynczym kontenerze Div, przypisując nazwy do atrybutu klasowego. Na przykład ustawimy trzy różne nazwy klas w jednym kontenerze „skrzynka”,„koło", I "granica”:

Krok 3: Style nagłówka

Następnie uzyskaj dostęp do nagłówka i zastosuj różne właściwości CSS do stylizacji:

H1
Styl czcionki: Kursywa;
kolor niebieski;

Tutaj:

• "styl czcionki„Własność określa styl czcionki jako„italski".
• "kolor”Jest wykorzystywany do ustawiania koloru nagłówka jako„niebieski".

Krok 4: Stylowa klasa „pudełka”

Teraz uzyskaj dostęp do „.skrzynka„Klasa za pomocą selektora kropki. Następnie zastosuj następujące właściwości CSS:

.skrzynka
Wysokość: 160px;
Szerokość: 160px;
Tło: RGB (161, 229, 250);
Margines: 20px 50px;

Według danego fragmentu kodu:

• "wysokość”Określa rozmiar elementu pionowo.
• "szerokość”Właściwość przydziela określoną szerokość elementowi.
• "tło”Właściwość ustawia określony kolor na tle elementu.
• "margines”Definiuje przestrzenie wokół elementu.

Wyjście

Krok 5: Stylowa klasa „graniczna”

Użyj „.granica„Aby uzyskać dostęp do drugiej klasy i zastosować właściwości wymienione poniżej:

.granica
granica: 20px stały RGB (161, 229, 250);
Rozmiar pola: granica;
Box-shadow: wstawka 0px 0px 0px 12px RGB (15, 15, 15);

Tutaj:

• "granica„Własność definiuje granicę poza elementem.
• "rozmiar pudełka”Jest wykorzystywany do definiowania rozmiaru pudełka i wartości”Box-box”Obejmuje wyściółkę i obramowanie w szerokości i wysokości elementu.
• "Shadow Box”Właściwość wkłada cień poza elementem. Aby to zrobić, „wstawka„Wartość jest ustawiona w określonym kolorze jako„RGB (15, 15, 15)".

Wyjście

Krok 6: Stylowa klasa „koła”

Uzyskaj dostęp do trzeciej klasy za pomocą „”.koło”:

.koło
Radiusz graniczny: 50%;

Następnie zastosuj „Radiusz graniczny„Własność, aby wykonywać krzywą ze wszystkich stron. Mówiąc dokładniej, zostanie wykorzystany do wykonywania zewnętrznego narożnika granicznego w kształcie elementu. Użytkownicy mogą tworzyć okrągłe zakątki za pomocą pojedynczego promienia lub eliptycznych zakątków z dwoma promieniami.

Wyjście

Chodziło o umieszczenie granicy wewnątrz div, a nie na jej krawędzi.

Wniosek

Aby umieścić granicę wewnątrz Div, a nie na jej krawędzi, najpierw stwórz pojemnik DIV za pomocą „". Następnie dodaj granicę za pomocą „granica„Własność i wykorzystanie”rozmiar pudełka”W celu zdefiniowania rozmiaru pudełka. Jego wartość obejmuje granicę i wyściółkę w szerokości i wysokości elementu. Następnie użyj „Shadow Box„Właściwość, która wprowadza cień poza elementem. Ten zapis wykazał procedurę umieszczania granicy w Div, ale nie na jej krawędzi.