За да контролирате границата на елемент, използвайте генеричното свойство border. Това свойство ви позволява да зададете дебелината, стила и цвета на рамката на елемент в една декларация.
Тези три свойства (дебелина на границата, стил на граница и цвят) могат да бъдат зададени в една декларация. Ето един пример:
Можете да зададете стил на рамка само от едната страна на елемент. За тази цел те използват гранични свойства-top (горна граница), border-right (дясна граница), border-bottom (долна граница), border-left (лява граница).
В този пример всяка страна на блока има различна дебелина, стил и цвят на рамката.
Помислете как да CSS помощможете да създадете форма като тази:
Стойностите на границите - дебелина, стил и цвят - могат да бъдат зададени отделно с помощта на специални свойства.
- border-style - стил на границата.
- border-widd - ширина на границата.
- border-color - цвят на границата.
Нека разгледаме всяка от стойностите поотделно.
собственост в стил граница Стил на границата.
Свойството border-style задава стила на границата. В CSS, за разлика от HTML, границата на елемент може да бъде не само плътна. Следните стойности се приемат за стила на границата:
- none - без рамка (по подразбиране).
- solid - плътна граница.
- двойна - двойна граница.
- прекъсната - пунктирана граница.
- пунктирана - рамка, съставена от поредица от точки.
- рид - граница "гребен".
- groove - граница "жлеб".
- вмъкване - вдлъбната граница.
- начало - екструдиран бордюр.
Примери как изглеждат.
без граница (няма)
плътна граница
двойна граница
граница на поредица от точки (пунктирана)
пунктирана граница
граница на жлеб
граница на билото
вдлъбната граница (вмъкване)
екструдирана граница (начало)
Между другото, ако зададете черен цвят на границата за рамката на билото, ще получите този резултат.
Разделителен блок с черна граница и стил на ръб.
Рамката изглежда солидна, но това е така, защото стилът на билото е създаден чрез добавяне на ефект на черна сянка, а черният ефект не се вижда на черна рамка.
Използвайки свойството border-style, стилът на границата може да бъде зададен не само за всички страни на блока. Възможно е да зададете няколко стойности за едно свойство на границата, в зависимост от броя на стойностите, ще бъде зададен стилът на границата различен номерстрани на блока. Можете да зададете една, две, три или четири стойности. Нека да разгледаме примери за всеки случай.
Една стойност (плътно) - стилът на границата е зададен за всички страни на блока.
Две стойности (твърдо двойно) - първата стойност задава стила за горната и долната страна, втората за страната.
Три стойности (плътни, двойно пунктирани) - първата стойност за горната страна, втората за страните, третата за дъното.
Четири стойности (плътни двойно пунктирани пунктирани) - всяка стойност за едната страна по посока на часовниковата стрелка, започвайки от върха.
Свойството border-width. Дебелина на границата.
За да зададете ширината на рамката на елемент, използвайте свойството border-width. Дебелината на границата може да бъде зададена във всякакви абсолютни мерни единици, например в пиксели.
Подобно на свойството за стил на граница, свойството също може да бъде зададено на една до четири стойности. Нека да разгледаме примери за всеки случай.
Примерен код:
Също така за свойството border-width има стойности във формуляра ключови думи. Има общо три:
- тънка - тънка граница;
- средна - средна дебелина;
- дебел - дебел бордюр;
Дебелина на границата: тънка.
Дебелина на границата: средна.
Дебелина на границата: дебела.
Свойството border-color. Цвят на границата.
За да контролирате цвета на рамката, използвайте инструмента за цвят на рамката. Цветовете за това свойство могат да бъдат зададени чрез всеки метод, описан в статията „Цветове в CSS“, а именно:
- Шестнадесетичен запис (#ff00aa) на цвета.
- RGB формат- rgb(255,12,110) . RGBA форматза CSS3.
- HSL форматии HSLA за CSS3.
- Име на цвят, например черно. Пълен списъкИмената на цветовете са дадени в таблицата с имена на цветове в CSS.
Свойството border-color също може да има една до четири стойности и ги третира подобно на предишните свойства.
Една стойност (червена).
Две стойности (червено черно).
Три стойности (червено черно жълто).
Четири стойности (червено черно жълто синьо).
Сега нека се върнем към проблема, посочен по-горе, и да начертаем фигура:
Ето кода, който рисува такава фигура, само по-голяма по размер:
Задаване на стойности за страните отделно
По-горе беше споменато, че можете да зададете стойности на свойство на границата само за едната страна на блок. Има свойства за тези цели:
- border-top (горна граница)
- граница-дясна
- граница-отдолу
- border-left (лява граница)
Нека ви напомня, че за всички свойства са посочени три стойности (дебелина, стил и цвят) в произволен ред. Но има свойства, които ви позволяват да зададете дебелината, цвета и стила за всяка страна поотделно. Написването на тези свойства произтича от горното.
Опции за горна граница (border-top).
- border-top-color - задава цвета на горната граница на елемента.
- border-top-width - задава дебелината на горната граница на елемента.
- border-top-style - задава стила на горната граница на елемента.
Опции за дясна граница (border-right).
- border-right-color - задава цвета на дясната граница на елемента.
- border-right-width - задава дебелината на дясната граница на елемента.
- border-right-style - задава стила на дясната граница на елемента.
Опции за долна граница (border-bottom).
- border-bottom-color - задава цвета на долната граница на елемента.
- border-bottom-width - задава дебелината на долната граница на елемента.
- border-bottom-style - задава стила на долната граница на елемента.
Опции за лява граница (border-left).
- border-left-color - задава цвета на лявата граница на елемента.
- border-left-width - задава дебелината на лявата граница на елемента.
- border-left-style - задава стила на лявата граница на елемента.
Пример за използване на тези свойства:
- цветът на горната граница беше предефиниран на червен чрез свойството border-top-color,
- използвайки свойството border-right-width, дебелината на дясната граница е зададена на 10px,
- използвайки свойството border-bottom-style, стилът на долната граница се предефинира като двоен,
- С помощта на свойството border-left-color цветът на лявата граница е син.
Свойството border-radius. Заоблени ъгли на границата.
Свойството border-radius има за цел да закръгли ъглите на границите на елемент. Това свойство се появи в CSS3 и работи правилно във всички модерни браузъри, с изключение на Internet Explorer 8 (и по-стари версии).
Стойностите могат да бъдат всякакви числа, използвани в CSS.
Свойство Border-radius: 15px.
Ако блоковата рамка не е зададена, тогава запълването се появява с фона. Ето пример за заобляне на блок без рамка, но с Цвят на фона:
Свойство Border-radius: 15px.
Има свойства за заобляне на всеки отделен ъгъл на елемент. Този пример ги използва всички:
Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;
Свойство Border-radius: 15px.
Въпреки че този код може да бъде написан в една декларация: border-radius : 15px 0 15px 0 . Факт е, че свойството border-radius може да бъде зададено от една до четири стойности. Таблицата по-долу очертава правилата, които управляват подобни съобщения.
След като внимателно проучихте тази таблица, можете да разберете това най-много кратка бележкажеланият стил ще бъде като този: border-radius : 15px 0 . Има само две значения.
Малко практика
Рисуване на лимон с помощта на CSS.
Ето кода за такъв блок:
Марж: 0 авто; /* Центрирайте блока */ width: 200px; височина: 200px; фон: #F5F240; рамка: 1px плътен #F0D900; радиус на границата: 10px 150px 30px 150px;
Вече сме начертали фигурата:
Сега нека оставим триъгълник от него:
Кодът на триъгълника е:
Марж: 0 авто; /* Поставете блока в центъра */ padding: 0px; ширина: 0px; височина: 0; рамка: 30px плътно бяло; цвят на долната граница: червен;
Това свойство създава рамка около елемент. Повече за този имот можете да прочетете на линка, а в тази статия I общ контурЩе опиша как работи. Тази информация ще бъде достатъчна, за да разберете как да правите рамки с помощта на CSS.
Синтаксисът за свойството border е прост: border: 1px solid black; . Това свойство има три значения:
- 1px - дебелина на границата.
- плътна - тип рамка, плътна е плътна линия, двойна е двойна плътна линия, прекъсната е пунктирана линия. Има няколко други вида граници, информация за тях можете да намерите тук: CSS граница.
- черно - задава цвета на границата. Цветовете могат да бъдат посочени по име, валидни стойностиса тук: CSS цветна таблица, или от шестнадесетичен код. Как да направите това е описано в статията: цветове в CSS.
CSS текстова рамка
Ето пример за използване на свойството border за създаване на рамка, която е широка един пиксел и черна:
На този параграф е присвоен класът example-1.
В този пример използвахме и свойството CSS padding. Това свойство определя размера на отстъпа от текста до щриха (границата на елемента).
Нека да разгледаме друг прост пример, само за да разберем смисъла. Нека създадем рамка с ширина три пиксела в червено и без подплата(CSS свойство за подплънки).
На този параграф е присвоен клас example-2.
Както виждаме, без подложката, текстовата рамка изглежда рогата.
Как да направите рамка за картина в CSS
Рамките за картини се задават по подобен начин, като се използва свойството border. Да направим рамка Зелен цвят 4 пиксела дебелина за изображението.
Пример-img ( рамка: 4px плътно зелено; )
Ето как ще работи този код:
Как да заоблите ъглите на рамка в CSS
Заоблянето на ъглите на граница в CSS се извършва с помощта на свойството border-radius. Това свойство е въведено в CSS3 и работи във всички съвременни браузъри.
Свойството border-radius може да има от една до четири стойности. Ако има една стойност, тогава тя задава степента на заобляне за всички ъгли. Нека дадем пример как това свойство ще работи с една стойност.
Пример-3 (контур: 1px плътно черно; border-radius: 15px; padding: 10px; )
Ето как работи:
свойство border-radius: 15px.>
Ако блокът няма граница, тогава има граница-width: 0; , тогава областта, запълнена с цвета на фона, ще бъде закръглена (свойство цвят на фона). Ето един пример:
Пример-4 (border-width: 0; // въпреки че тази стойност е 0 по подразбиране background-color: #DDD; border-radius: 15px; padding: 10px; )
Ето как работи този пример:
свойство border-radius: 15px.>
Както писах по-рано, свойството border-radius може да бъде зададено от една до четири стойности. Таблицата по-долу описва как ще работи всяка комбинация от стойности.
За свойството border-radius стойностите могат да бъдат посочени като проценти.
Нека начертаем кръг в CSS. За да направите това, вземете квадратен блок от 100 на 100 пиксела и го закръглете CSS ъгли border-radius: 50% правило.
Пример-5 (ширина: 100px; височина: 100px; цвят на фона: #F00; радиус на границата: 50%; )
Ето как работи този пример:
Това покрива изцяло темата „рамки в CSS“. Успех в изучаването на CSS!
Здравейте, скъпи приятели и гости на блога! Днес продължаваме да се запознаваме с елементите на изграждането на уебсайтове и нека се научим как да създаваме css frameworks. В последната си статия ви разказах и показах как се създават, но css рамкаизглеждат по-красиви и привлекателни. Та кой се научи да прави html рамка, той ще може да създаде css рамка. И аз ще ти помогна с това! Да започваме...
Как сами да направите css рамки за уебсайт?
Както вече ви казах по-горе, css frameworks са много по-красиви и практични от html frameworks и няма да ви е трудно да създадете сами такива css frameworks, ако вече сте се научили как да правите html frameworks.
Какво ни трябва, за да направим css framework? Нищо твърде възмутително! Вашето желание и моята статия, в която ще ви обясня всичко подробно.
Ето неговия код:
Нашите css рамки!
Ето втория пример за css рамка:
Ето неговия код:
Нашите css рамки!
Ето трети пример за пунктирана рамка:
Това е нейният код:
Нашите css рамки!
Това е четвъртият пример за рамка с двоен контур:
Това е кодът му:
Нашите css рамки!
И ако приложите стойността „гребен“, тогава това е рамката, която получавате:
Ето неговия код:
Нашите css рамки!
Сега нека го направим с вас заоблени ръбовенашата css граница, използвайки тези стойности „border-radius“ и „box-shadow“:
Ето рамката с кръгли ръбовеи неговия код:
Нашите css рамки!
Сега нека направим рамка с замъглени ръбове, това също изглежда доста привлекателно и е лесно да се направи, просто променете числото в стойността „box-shadow“ на по-висока стойност. И ето какво се случва:
Ето неговия код:
Нашите css рамки!
Сега ще направим рамка с многоцветни контури, просто добавете няколко цветови схеми към стойността „box-shadow“:
Ето неговия код:
Нашите css рамки!
И сега апогеят на нашата css рамка е кръгла рамка. Това може да се направи и просто чрез промяна на стойността на "border-radius". Вижте тук:
Ето кода тук:
Нашите css рамки!
Е, това е всичко за днес. Ще се видим отново!
Ако сте харесали материала, моля, направете следното...
- Моля, харесайте го.
- Ретуитване.
- Споделете тази публикация с приятелите си в социалните мрежи.
Благодаря за вниманието!
Границите са онези линии, които обграждат елемент (съдържанието, което съдържа, и подложката около него). Пример, който вече сме срещали, са клетъчни рамки в таблица.
CSS предоставя два вида граници: вътрешни граници и външни линии. CSS свойства, отговарящи за дизайна на рамки, започват с думата „граница“, която може да се преведе като „Рамка“, „Граница“. Наличието и форматът на външния контур се определят от свойства, започващи с думата „контур“. Контурът, за разлика от границата, не влияе на ширината и позицията на рамкирания блок. Освен това не може да се монтира само от едната страна, т.к граница- само от всички страни наведнъж.
Първо, нека поговорим за дизайна на границите, след което ще преминем към контур.
border-width
Задава ширината на границата. Ясно е, че по подразбиране елементът е заобиколен от рамки от четири страни. Свойството ви позволява да зададете ширината на границите еднаква за всички страни или различна за всяка страна. В зависимост от това каква ширина трябва да бъде присвоена на кои граници, можете да посочите от една до четири стойности в правилото.
Можете да зададете ширината, като използвате обичайните пиксели, проценти и други CSS единици за дължина, или запазени думи тънък(2px), среден(4px) и дебел(6px).
Ширина на границата: 16px 12px 4px 8px;
граничен стил
Определя стила на границата. Имайте предвид, че ако не зададете това правило, но посочите свойството border-width, тогава изобщо няма да има рамки, така че ако искате видими граници, не забравяйте да посочите граничен стил.
Едно свойство може да има доста стойности, всички те са ясно показани на фигурата по-долу.
Последният параграф показва, че стилът, както и дебелината, на рамката от всяка страна може да бъде свой собствен:
стил на рамката: плътна двойна точка без
цвят на границата
Работи по същия начин като предишните свойства, но отговаря за цвета на границите. Можете също да го зададете от една до четири стойности и вече знаете резултата. Ако правилото не е зададено, рамките ще имат цвета на текста на текущия елемент или, ако това не е посочено, цвета на текста на родителския елемент.
Цвят на рамката: #C85EFA;
граница
Опростява записа и запазва кода, което ви позволява да инсталирате всичко изброени имотиза граници от всички страни на елемент в един ред:
P ( граница: 2px плътно зелено; )
За да конфигурирате различни правила за рамки с различни странимогат да се използват следните стойности:
- граница-отгоре- горен лимит.
- граница-дясна- правилно.
- граница-отдолу- нисък.
- граница-ляво- наляво.
P ( граница-ляво: 6px пунктирана жълта; )
контурна ширина
Същото като border-width, само за външната рамка, не и за вътрешната. Задава дебелината на контура в същите стойности като border-width. В допълнение към дебелината на рамката на елемента, трябва да посочите неговия стил, в противен случай няма да има контур.
контурен стил
Стойностите на свойствата дублират стойности граничен стил. Правилото определя стила на външния контур.
CSS3 рамкадопълва възможността за форматиране на граници на елементи със свойства, които позволяват закръглете ъглитеелемент, а също и използване Изображенияза проектиране на границите на елемента.
Заоблени ъгли и рамки за снимки
1. Закръгляване на ъгли с граница-радиус
Поддръжка на браузър
IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Опера: 10.5
iOS Safari: 7.1
Опера мини: —
Браузър за Android: 4.1
Chrome за Android: 44
Свойството ви позволява да закръгляте ъглите на малки букви и блокови елементи. Кривата за всеки ъгъл се определя с помощта на един или два радиуса, определящи неговата форма − кръгили елипса. Радиусът се прилага към целия фон, дори ако елементът няма граница, точната позиция на секанса се определя с помощта на свойството background-clip.
Свойството border-radius ви позволява да заоблите всички ъгли наведнъж и като използвате свойствата border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, може да закръгли всеки ъгъл поотделно.
Ако зададете две стойности за свойството border-radius, първата стойност ще закръгли горе влявоИ долен десен ъгъл, а второто - горе в дясноИ долу вляво.
Стойности, определени чрез / определят хоризонталнаИ вертикални радиуси. Имотът не е наследен.
Настроики
Div (ширина: 100px; височина: 100px; граница: 5px плътна;).r1 (радиус на границата: 0 0 20px 20px;).r2 (радиус на границата: 0 10px 20px;).r3 (радиус на границата: 10px 20px ; ;) .r4 (радиус на границата: 10px/20px;) .r5 (радиус на границата: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (радиус на границата: 10px 20px 30px 40px/30px;) .r7 (border-radius: 50%;).r8 (border-bottom: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 ( border -radius: 0 100%;).r11 (border-radius: 0 50% 50% 50%;).r12 (border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px ;) 
Ориз. 1. Примери за различни опции за заобляне на ъгли на блок
2. Граница-изображение
Поддръжка на браузър
IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Опера: 15.0, 11.0 -o-
iOS Safari: 7.1
Опера мини: 8 -о-
Браузър за Android: 4.4, 4.1 -webkit-
Chrome за Android: 42
Свойството ви позволява да зададете изображение като рамка на елемента. Основното изискване за изображението е то да бъде симетрично. Свойството включва следните стойности: (border-image: width source slice repeat outset;) .
С помощта на това просто изображениеМожете да получите тези рамки за елемент.
/* Пример 1 */ div ( ширина: 260px; височина: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch;) /* Пример 2 */ div ( width: 260px; height: 100px; border-image-width: 15px; border-image-source: url(border_round. png); граница-изображение-срез: 30; 
Ориз. 2. Пример за проектиране на граници на блок с помощта на изображение
Разрези A - B - C - D образуват ъглите на рамката, а частта от дизайна, разположена между тях, запълва останалото пространство на рамката в съответствие с дадена стойностсвойства за повтаряне на border-image. Размер на ъгъла (в в този примертова е числото 30) се определя с помощта на стойността на свойството border-image-slice.
2.1. border-image-width
Свойството указва ширината на изображението за рамката на елемента. Ако ширината не е зададена, тя по подразбиране е 1.
| border-image-width | |
|---|---|
| Стойности: | |
| дължина | Задава ширината на границата в единици за дължина - px/em. Можете да зададете от една до четири стойности наведнъж. Ако е посочена една стойност, тогава ширината на всички страни на рамката е една и съща, две стойности определят ширината на горната-долната част и дясно-ляво и т.н. |
| номер | Числовата стойност, по която се умножава стойността на ширината на рамката. |
| % | Ширината на рамката на елемента се изчислява спрямо размера на изображението. Хоризонтално спрямо ширината, вертикално - спрямо височината. |
| Автоматичен | Съответства на стойността на border-image-slice. |
| начален | |
| наследяват | |
Синтаксис
Div (border-image-width: 30px;) Фиг. 3. Пример за задаване на ширина на рамка на изображение с помощта на различни видовестойности
2.2. border-image-source
Свойството указва пътя до изображението, което ще се използва за декориране на границите на блока.
Синтаксис
Div (източник на изображение на граница: url(border.png);)
2.3. border-image-slice елементи
Свойството определя размера на частите на изображението, използвани за определяне на границите на елемента, и разделя изображението на девет части: четири ъгъла, четири ръба между ъглите и централна част.
| Стойности: | |
| номер | Размерът на частите на рамката може да се задава с помощта на една, две, три или четири стойности. Една стойност определя границите същия размерза всяка страна на елемента. Две стойности: първата определя размера на горната и долната граница, втората - дясната и лявата. Три стойности: първата определя размера на горната граница, втората - дясната и лявата, а третата - долната граница. Четири стойности: Определя размерите на горната, дясната, долната и лявата граница. Числовата стойност представлява броя px. |
| % | Размерите на рамката се изчисляват спрямо размера на изображението. Хоризонтално спрямо ширината, вертикално - спрямо височината. |
| запълвам | Стойността се посочва заедно с число или процент. Ако е зададено, изображението не се отрязва от вътрешния ръб на рамката, но също така запълва областта вътре в рамката. |
| начален | Задава това свойство на стойността му по подразбиране. |
| наследяват | Наследява стойността на това свойство от родителския елемент. |
Синтаксис
Div (граница-изображение-срез: 50 20;) 
Ориз. 4. Пример за определяне на срезове на рамката на изображението
2.4. border-image-repeat
Подпълване на контролите на свойствата фоново изображениепространство между ъглите на рамката. Може да се посочи с помощта на една стойност или двойка стойности.
Синтаксис
Div (border-image-repeat: repeat;) Фиг. 5. Пример за повтаряне на централната част на рамка на изображение с помощта на различни типове стойности
2.5. border-image-outset
Свойството ви позволява да преместите рамката на изображението извън границите на елемента с определена дължина. Може да се посочи с помощта на една или четири стойности.
Синтаксис
Div (граница-изображение-изход: 10px;) 
Ориз. 6. Пример за изместване на рамка на изображение с помощта на различни типове стойности
3. Изместване на външната рамка outline-offset
Свойството указва разстоянието между границата граничен елементи външна граница, създадена с помощта на свойството outline.
/*Фигура 1:*/ img ( граница: 1px плътно розово; контур: 1px пунктирано сиво; отместване на контура: 3px; ) /*Фигура 2:*/ img ( border-width: 1px 10px; border-style: solid; контур-цвят: розово: 1px пунктирано сиво;
Ориз. 7. Пример за декориране на изображение с външна рамка 4. Градиентна рамка
Стойността на border-image може да бъде не само изображение, но и градиентно запълване.
Полупрозрачна рамка
Един от цветовете е прозрачен. По този начин можете да зададете граници за всички страни на елемент наведнъж или отделно за всяка страна. Дебелината на границата се контролира от свойството border-width.
Пощенски плик
