Jak ustawić wewnętrzną granicę w CSS

Gdy granica jest umieszczona wewnątrz pojemnika, jest ona znana jako granica wewnętrzna. Wewnętrzne granice są wykorzystywane do stabilnego pojemnika. Po utworzeniu pojemnika jego wysokość i szerokość zwykle rozszerzają się wraz z dodaniem różnych właściwości, takich jak wyściółka. Aby uniknąć tej sytuacji, granica jest umieszczana wewnątrz pojemnika.

W tym artykule dowiemy się, jak ustawić wewnętrzną granicę w CSS.

Jak ustawić wewnętrzną granicę w CSS?

W CSS wewnętrzna granica można ustawić przy użyciu następujących właściwości:

• właściwość rozmiaru pudełka
• Zarys nieruchomości
• właściwość pudełka

Zbadajmy każdą właściwość z przydatnymi przykładami.

Metoda 1: Korzystanie z właściwości rozmiaru pudełka do ustawiania wewnętrznej granicy w CSS

„„rozmiar pudełka„Nieruchomość utrzymuje wysokość i szerokość pojemnika, gdy do niej dodawanie wyściółki lub granicy. Gdy właściwość rozmiaru jest używana z „Box-box„Wartość, wyściółka i granica elementu zostaną uwzględnione w całkowitej wysokości i szerokości.

Teraz sprawdź podany przykład.

Przykład

Obecnie nasza strona internetowa ma pojemnik z zestawem wysokości i szerokości jako „250px". Jednak gdy dodaliśmy granicę, określona wartość wysokości i szerokości rozszerza się na „276px”, Które można zobaczyć na poniższym obrazie:

W naszym pliku HTML dodaliśmy „”Z klasą„przykład”I umieścił go w„”Tag:

Do stylizacji stworzonego pojemnika umieść „.”Przed nazwą klasy jako„.przykład". Następnie określ wysokość i szerokość jako „250px", Ustaw "13px„Pomarańczowa granica i użyj„Box-box”Jako właściwość rozmiaru pudełka. Ponadto ustawiliśmy również „kolor tła" Jak "wodny„Aby rozróżnić tło od dodanej granicy.

Zapisz podany kod i otwórz plik HTML w przeglądarce:

.przykład
kolor tła: Aqua;
szerokość: 250px;
Wysokość: 250px;
granica: 13px Solid Orange;
Rozmiar pola: granica;

W rezultacie granica zostanie dodana wewnątrz pojemnika, a wysokość i szerokość pozostaną sama:

Przejdź do następnej metody!

Metoda 2: Używanie właściwości zarysowej do ustawiania wewnętrznej granicy w CSS

CSS „zarys„Właściwość z łatwością dodaje linię wokół pudełka elementu o pożądanej szerokości, kolorze i typu. Oznacza to, że możemy wykorzystać nieruchomość zarysową do ustawiania wewnętrznej granicy. Dodatkowo „„Offset zarys ” Własność pomaga ograniczyć ekspansję granicy.

Przykład

Określić "zarys„Własność o wartości”Solidny 12px pomarańczowy”, Gdzie pomarańczowy jest kolor linii, a 12px to szerokość, a solid jest rodzajem stylu dla linii. Następnie użyj „Offset zarys„Własność wraz z„-12px" wartość. To umieści granicę wewnątrz pojemnika i powstrzyma rozszerzenie w odniesieniu do kontenera:

.przykład
kolor tła: Aqua;
szerokość: 250px;
Wysokość: 250px;
Zarys: Solid 12px Orange;
Ofline ofline: -12px;

Wyjście

Unoszenie się nad dodanym pojemnikiem pokaże jego obecny wymiar, który jest „250 x 250”Jak określono w pliku HTML:

Chcesz ustawić wewnętrzną granicę za pomocą cieni? Sprawdźmy następującą sekcję.

Metoda 3: Używanie właściwości box-shadow do ustawienia wewnętrznej granicy w CSS

„„Shadow Box„Własność jest używana głównie do upuszczania cieni z ramek elementów. Jednak korzystanie z tej właściwości w określony sposób może skutecznie ustawić wewnętrzną granicę.

Przykład

W pliku HTML podaj „Shadow Box„Własność o wartości”wstawka 0px 0px 0px 12px Orange”, Gdzie pomarańczowy jest kolor, 12px sprawi, że cień będzie szerszy, a wstawka umieści cień wewnątrz pojemnika. Pozostałe wartości 0px są powiązane z przesunięciem i rozmyciem. Połączenie wszystkich tych wartości utworzy wewnętrzną granicę za pomocą cieni:

.przykład
kolor tła: Aqua;
szerokość: 250px;
Wysokość: 250px;
Box-shadow: wstawka 0px 0px 0px 12px Orange;

Wyjście

Aby sprawdzić, czy wartości wysokości i szerokości są nadal takie same, wyświetl wymiar pojemnika, unosząc się nad nim:

Zaproponowaliśmy najbardziej odpowiednie metody ustawiania wewnętrznych granic w CSS.

Wniosek

Aby ustawić wewnętrzną granicę, możesz użyć „rozmiar pudełka”,„zarys", I "Shadow Box”Właściwości CSS. Właściwość rozmiaru pudełka służy do ograniczenia rozszerzenia dodanej granicy. Właściwość zarysowy jest używana w połączeniu z przesunięciem konturu do dodania konturu jako wewnętrznej granicy. Ponadto cienie można również wykorzystać do określonego celu za pomocą właściwości pudełkowej. W tym poście opisaliśmy trzy metody ustawienia wewnętrznej granicy w CSS.