CSS границите и очертанията са ценни инструменти за уеб дизайнери, които искат да добавят стил към сайта. Те са лесни за използване, след като знаете как работят и са достатъчно гъвкави, за да отговорят на широк спектър от нужди. Нека да разгледаме границите на CSS, за да видим откъде трябва да започнете.
Каква е разликата между граница и контур в CSS?
CSS контурите и границите образуват два от външните слоеве на моделът CSS box, разположен между граници и полета. Въпреки че тези свойства са подобни, те имат различни стойности и цели.
От една страна, контурите на CSS се намират извън границите. Това означава, че те могат да се припокриват със съдържание извън елемента, към който ги прилагате. Заедно с това границите на CSS променят размерите на елемент, но очертанията не.
Ако имате затруднения с визуализирането на стилове на граници и контури, можете да използвате вашия инструментите за разработка на браузъра за отстраняване на грешки тях.
CSS Border & Outline Стойности на споделени свойства
Въпреки различията си, CSS границите и контурите споделят някои от своите стойности. Стенограмата, която използвате за всеки, също е много сходна.
Стенография на граници и контур на CSS
Подобно на други сложни свойства на CSS, границите и очертанията имат наличен стенограм. И двете свойства споделят един и същ формат за техните стенограмни опции и изглежда така.
граница: ширинастилцвят;
контур: ширинастилцвят;Това създава правила, които изглеждат така, когато са в действие. Разбира се обаче, тази стенограма не покрива всички налични стойности за тези свойства.
рамка: 10px плътно синьо;
контур: 20px плътно червено;Тези съкратени CSS правила за граници и контури водят до тънка синя рамка с дебел червен контур.
Подобно на други съкратени CSS свойства, можете също да използвате отделни свойства, за да постигнете същите резултати.
CSS border-width & outline-width
Ширините на границите и контурите са незадължителни стойности на CSS свойства, които задават дебелината на границите и контурите, които използвате. Форматът за тези свойства е един и същ.
ширина на контура: 20px;
border-width: 10px;Границите позволяват да се задават индивидуални ширини за всяка страна на елемента, но контурите не. Можете да прочетете повече за това в следващите раздели.
CSS стил на рамка и контур
Границите и контурите на CSS се предлагат в различни стилове. Плътните граници са най-често срещаните, но можете да бъдете креативни с начина, по който използвате граници и контури.
стил на границата: плътен;
стил на контур: пунктиран;Можете да намерите пълен списък на различните CSS стилове на граници и контури в края на тази статия.
CSS цвят на границата и цвят на контура
Подобно на други цветни CSS свойства, границите и очертанията приемат всички разрешени за CSS цветове. Това включва шестнадесетични кодове, RGB кодове, стенографски цветове и др.
цвят на границата: син;
цвят на контура: #ff0000;Можете също да използвате цветови градиенти, когато работите с граници и контури на CSS.
Стойности на свойства на CSS Border
Наред със стойностите на техните споделени свойства, границите и очертанията също имат уникални стойности за изследване. CSS границите имат две уникални свойства, които си струва да научите.
CSS радиус на границата
Добавянето на радиус към границата на елемент ви дава голям контрол върху формата му. Всеки ъгъл на елемент може да има различен радиус и това свойство може да бъде зададено дори когато border-style е зададено на none.
радиус на границата: 20px;Можете да зададете една стойност, за да промените радиуса на всички ъгли.
Можете също така да разделите ъглите на групи от горния ляв/долния десен и горния десен/долния ляв.
радиус на границата: 10px 20px;Това улеснява създаването на интересни форми с вашите HTML елементи.
И накрая, можете да зададете всеки ъгъл да има свой собствен радиус.
радиус на границата: 10px 20px 30px 40px;Тези стойности се прилагат по посока на часовниковата стрелка, започвайки от горния ляв ъгъл.
Свойства на страничната страна на CSS
За разлика от контурите, можете да зададете всяка страна на границата да има уникална стойност за много от нейните свойства. Това прави възможно да придадете на всяка страна на вашия елемент различна ширина.
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;Можете също да зададете независими CSS стилове на граници за всяка страна на елемент.
border-left-style: плътен;
border-right-style: пунктиран;
border-top-style: пунктиран;
border-bottom-style: двойно;И можете да промените цвета на всяка страна, ако искате.
border-left-style: син;
border-right-style: #ff0000;
стил на границата отгоре: #00ff00;
стил на граница-отдолу: rgb (0, 0, 255);Граничните страни на CSS работят с обикновената стенограма, за да се комбинират по този начин.
border-left: 10px плътно синьо;
граница-дясна: 20px с точки #00ff00;
граница отгоре: 30px пунктирана #ff0000;
граница-отдолу: 40px двойноrgb(0, 0, 255);Стойности на свойства на CSS Outline
Подобно на границите на CSS, контурите имат собствено уникално свойство; контур-офсет.
CSS контурно отместване
Добавянето на отместване към контур създава пространство между него и основния елемент. Това отместване трябва да е еднакво за всяка страна на контура и свойството приема само една стойност.
отместване на контура: 10px;Това може да бъде чудесен начин да използвате трета граница за вашите елементи, която съответства на вашия фонов цвят.
CSS стилове за граници и контури
Както границите, така и очертанията се нуждаят от стил, за да работят. Има десет налични стила, от които да избирате, включително граници, които изобщо не се показват.
стил на границата: плътен;
граничен стил: пунктиран;
стил на границата: пунктиран;
стил на границата: жлеб;
граничен стил: хребет;
граничен стил: двойно;
стил на границата: вмъкване;
граничен стил: начало;
стил на границата: скрит;
border-style: няма;Границите споделят същите стилове с очертанията, само със зададен стил на очертания като свойството.
Как да използвате CSS граници и контури
Очертанията и границите са чудесни инструменти за дизайн за създателите на уебсайтове. Можете да определите външния вид и усещането на уебсайта си с тези свойства на CSS, но ще трябва да проявите творчество.
