Едно от забавните приложения на свойството CSS3 box-shadow е да създадете двойна рамка около елемент. Много интересен ефект за декорация на страници, но той ще работи само в по-новите версии на браузъри, които поддържат box-shadow.
Има обаче няколко други метода за създаване на този ефект. Освен това очевидното използване на фоново изображение далеч не е идеално.
Този урок представя пет метода за създаване на двойна граница около елемент. И само един от тях изисква изображение, докато всички останали използват чист CSS код с отлична поддръжка в браузърите.
Метод 1: граница и контур
Този метод работи само в браузъри, които поддържат свойството outline (всички с изключение на IE6 / 7). Добавяте както свойствата на границата, така и на контура към елемента.
Един (граница: плътна 6px #fff; контур: плътна 6px # 888;)
Причината, поради която този метод работи, е, че контурната рамка винаги рисува от външната страна на правоъгълника. Проблемът със свойството outline възниква, когато се използват плаващи елементи, тъй като границата се припокрива със съседни елементи.
Метод 2: псевдо елемент
Този метод изисква абсолютно позициониране на рамката:
Две (граница: плътна 6px #fff; позиция: относителна; z -индекс: 1;). Две: преди (съдържание: ""; дисплей: блок; позиция: абсолютна; отгоре: -12px; вляво: -12px; граница: плътно 6px # 888; ширина: 312px; подложка отдолу: 12px; минимална височина: 100%; z-индекс: 10;)
Ключовите моменти са задаването на свойството z-index (така че псевдоелементът да припокрива съдържанието), позиционирането и стойността на min-height. Последното свойство запазва еластичността на рамката.
Метод 3: сянка
Най-добрият метод, тъй като изисква само един ред код с настройките на свойството box-shadow.
Три (box-shadow: 0 0 0 6px #fff, 0 0 0 12px # 888;)
Две сенки се използват за създаване на двойна рамка. Те са разделени със запетаи. Размазването е зададено на 0. Тъй като втората сянка се припокрива с първата, тя има двойна ширина. Ключовият момент е използването на непрозрачни цветове, което създава ясна граница между кадрите.
Подобно на свойствата на очертанията, box-shadow не засяга съседни елементи и може да ги припокрива. Следователно е необходимо да се зададе поле, което да формира външния вид на композицията.
Естествено, поддръжката на свойството box-shadow е ограничена до по-новите браузъри.
Метод 4: допълнителният елемент div
Този метод използва външен елемент
Четири (граница: плътна 6px # 888; фон: #fff; ширина: 312px; мин. Височина: 312px;). Четири div (ширина: 300px; мин. Височина: 300px; фон: # 222; марж: 6px автоматично; препълване : скрит;)
Външният елемент е малко по -голям, създавайки илюзия за двойна граница.
Метод 5: свойството на гранично изображение
Друга нова техника е често пренебрегваното свойство на гранично изображение на CSS3:
Пет (border-width: 12px; -webkit-border-image: url (multiple-border.gif) 12 12 12 12 повторение; -moz-border-image: url (multiple-border.gif) 12 12 12 12 повторение; border-image: url (множество рамки) 12 12 12 12 повторение; / * за Opera * /)
Знаете ли друг метод?
Разбира се, тук са събрани отдавна известни и широко използвани методи. Но може би знаете трик. Споделете с читателите си в коментарите.
Майкъл 2016-06-11 1 HTML и CSS 0
Как се прави двойна граница в css?
Здравейте всички. Знаете ли как да удвоите границата в css? Ако не, моля, прочетете тази малка бележка. Въпросът е, че не можете да направите това с обикновена граница, трябва да тръгнете по другия път.
Ако посочите граница, използвайки свойството border, можете да посочите само една. Но много често дизайнът може да изисква множество рамки. В този случай трябва да използвате псевдо -рамка - сянка.
Двойна граница с кутия-сянка
Като цяло, ако искате да изучавате сянката в css по -подробно, тогава ви съветвам да прочетете по съответната тема. В тази статия няма да обяснявам подробно синтаксиса на свойството, а просто ще ви покажа трик как да създадете двойна граница. Така че, нека създадем обикновен блок, на който ще присвоя някои стилове. Блокът може да бъде всеки и с всяко съдържание. В моя случай това е обикновен div, така че дори няма да показвам html кода. А ето и стиловете:
Div (
фон: # E0D8A3;
ширина: 180px;
височина: 110px;
подложка: 12px;
}
Е, типичен пример за блоков дизайн.
Сега нека създадем двойна граница, използвайки множество сенки. Ще добавя следното свойство към стиловете за блока:
Box-shadow: 0 0 0 1px # 000, 0 0 0 10px # E0D8A3;
Ето как изглежда:
Както можете да видите, стана много добре. В box-shadow има само 5 параметъра. Първото е хоризонталното изместване на сянката, второто е вертикалното. Третият и четвъртият параметър са размазване и разтягане. Както виждате, изобщо не докосваме първите три. Не се нуждаем от размазване, защото се нуждаем от остра сянка. Както виждате, предписах четвъртия параметър - разтягане. Той определя колко сянката ще бъде по -голяма от елемента, към който е прикрепен.
По подразбиране всичко изглежда така - сянката е със същия размер като елемента и лежи ясно под него. Ако промените разтягането, сянката започва да излиза извън елемента. Ето как можете да създадете граници, точно същите като при свойството border. Е, с петия параметър мисля, че всичко е ясно - това е цветът на сянката.
Както можете да видите, току -що изброих параметрите за всяка нова сянка, разделени със запетаи. Мисля, че вече се досещате, че можете да създадете тройна граница и т.н. по същия начин. Тук няма ограничения. Всъщност, както за мен, въпросът е затворен, но ако имате въпроси, можете да ги напишете в коментарите.
Само момент на вашето внимание:Всички искаме да хостваме нашите сайтове на надежден хостинг. Анализирах стотици хостинга и намерих най -добрия - HostIQИма стотици положителни отзиви за него онлайн, средната оценка на потребителите е 4,8 от 5. Нека сайтовете ви бъдат щастливи.
Рамките могат да се използват по много начини, например като декоративен елемент или за отделяне на два обекта. CSS предоставя безброй възможности за използване на рамки.
Дебелина на рамката
Дебелината на границата се определя от свойството width-width, което може да бъде тънко, средно и дебело или числова стойност в пиксели. Фигурата показва тази система:
Цвят на рамката
Свойството border-color определя цвета на рамката. Стойностите са нормални стойности на цвета като "# 123456", "rgb (123,123,123)" или "жълто".
Типове рамки
Има различни видове рамки. Осемте типа рамки и тяхната интерпретация в Internet Explorer 5.5 са показани по -долу. Всички примери са показани в "златен" цвят и "дебела" дебелина, но, разбира се, могат да бъдат показани в различен цвят и дебелина.
Стойностите none или hidden могат да се използват, ако не искате да показвате границата.
Примери за определяне на рамки
Трите свойства, обсъдени по -горе, могат да бъдат комбинирани във всеки елемент и съответно да задават различни рамки. За да илюстрирате, разгледайте документ, който определя различни рамки за
, , и Резултатът може да не е толкова впечатляващ, но демонстрира някои възможности:
H1 (широчина на границата: дебела; стил на границата: пунктиран; цвят на границата: злато;) h2 (ширина на границата: 20px; стил на границата: изход; цвят на границата: червено;) p (ширина на границата: 1px; бордюрен стил: начертан; цвят на границата: син;) ul (ширина на границата: тънка; стил на рамка: плътна; цвят на рамката: оранжев;)
Можете също така да зададете персонализирани свойства за горния, долния, десния и левия ръб на рамката. Ето как да го направите:
H1 (ширина на границата отгоре: дебела; стил на границата отгоре: плътна; цвят на границата отгоре: червена; ширина на границата отдолу: дебела; стил на границата отдолу: плътна; цвят на границата отдолу: син; граница-дясна ширина: дебела; граница-десен стил: плътна; граница-дясно-цвят: зелено; граница-лява ширина: дебела; граница-ляв стил: плътна; рамка-ляво-цвят: оранжево;)
Съкратена нотация
Както при много други свойства, можете да комбинирате няколко свойства в едно, като използвате границата на думата. Пример:
P (широчина на границата: 1px; стил на рамка: плътна; цвят на рамката: синьо;)
може да се комбинира в:
P (рамка: 1px плътно синьо;)
Резюме
В този урок научихте за неограничените възможности на CSS при използване на рамки.
В следващия урок ще разгледаме как да дефинираме размерите в модела на кутията - височина и ширина.
Имот CSS – « граница», Позволява ви да зададете дебелината, цвета и вида на периметровата линия около елемента. Параметрите на това свойство могат да бъдат записани на един ред, разделени с интервали и в произволен ред.
- - ширина на линията един пиксел
- - плътна линия
- - Бял цвят
- - черен цвят
- - сив цвят
Граница с плътен елемент
Граница с пунктиран елемент
Граница с пунктирани елементи
Граница на елемент с двойна линия
Собственост на отделни участъци от границата
Релефна гофрирана рамка в обем
Изпъкнала гофрирана рамка в обем
Обемна депресирана рамка
Обемна изпъкнала рамка
Уроци / CSS /
Урок 7. Оформете CSS елемент
Почти всеки сайт използва свойство, което създава рамка около елемент. Той е необходим или за бутони, или за блокове с текст. За да създадете граница, елемент в CSS има две свойства: рамка и контур. Нека ги разгледаме.
граница
Това свойство е необходимо за задаване на граница около елемент, посочва нейната граница в уеб документ, ширината на рамката се взема предвид при позиционирането на елемента. Той има 3 стойности- цвят, дебелина и тип рамка.
Синтаксисът за граничното свойство е следният:
рамка: Тип ширина Цвят;
Можете да изберете различен ред за определяне на стойностите на свойствата, но основното е чрез интервал.
Дебелината (ширината) на рамката трябва да бъде посочена в пиксели (px) или процент (%).
Цветът може да бъде зададен или във формат RGB (червено зелено синьо) или в HTML шестнадесетичен код.
По -долу са ВИДОВЕ НА ЛИНИЯс техните имена:
Как да зададете граници на елемент? Правим следното:
#block (
бордюр: 3px solid # 0085cc; / * задайте синя линия 3px * /
}
Ако искате да инсталирате едно-две-три рамки от определена страна, тогава го посочваме така:
граничен връх- рамка отгоре;
граница-дъно- рамка в долната част;
граница-ляво- рамка вляво;
гранично-дясно- рамка вдясно;
Блокиране (
граница вдясно: 3px solid # 0085cc;
border-bottom: 2px прекъснато # 0085cc;
}
Ако искаш премахване на рамкиелемент в CSS, след това напишете в границата на свойството - няма
Празно (
граница: няма; / * елемент с празен клас няма да има граница * /
}
очертаване
Outline е свойството, от което се нуждаете, за да зададете външната граница на елемент.
Има две разлики от границата:
Първо, линията, дадена в контура, НЯМА да повлияе на позицията на самата кутия, нейната ширина и височина.
На второ място, няма възможност за инсталиране на рамка от определена страна.
Синтаксисът е същият като границата.
контур: 2px пунктиран # 0085cc; / * 2 пиксела пунктирана синя граница * /
За контур, както и за рамка, можете да премахнете граници, като не въведете нищо:
Благодаря за вниманието!
Предишна статия
Урок 6.
Границите на елемента.
Подложки и полета в CSS. Какво представляват маржът и подложката? Следващата статия
Урок 8. Как да зададете цвета на текста и фона на елемент в CSS?
Коментари към статията (vk.com)
граница
Поддръжка на браузъра
12.0+
4.0+
1.0+
1.0+
3.5+
1.0+
Описание
Свойството CSS ви позволява едновременно да зададете ширина, стил и цвят за границата на блока. Границата на блока е правилна линия / рамка, която обгражда блока от всички страни. Трябва да се има предвид, че когато добавите рамка, това ще повлияе на общия размер на блока.
Стойностите са разделени с интервал и могат да бъдат в произволен ред, браузърът ще определи кое от тях съответства на необходимия параметър. И трите стойности са незадължителни, ширината и / или цветът могат да бъдат пропуснати, като в този случай стойността, зададена за свойството по подразбиране, ще се използва вместо липсващата стойност, т.е. ако например не е посочена ширина, тогава ще се използва стойността по подразбиране на свойството. Таблицата под синтаксиса съдържа стойностите на кои свойства можете да използвате.
Забележка: За да зададете граници само на определени страни на елемент, използвайте следните свойства: border-top, border-bottom, border-left, border-right.
Съвет: Като цяло, когато използвате рамка, трябва да добавите подложка.
CSS свойство: border
Те добавят бяло пространство между рамката на блока и неговото съдържание: текст, изображения или дъщерни тагове. Обикновено рамката се показва близо до съдържанието на елемента, това е полезно само ако трябва да зададете рамка около картината.
Синтаксис
border: border-width-border-style border-color | наследяване;
Стойности на имотите
Пример
Пример Тук има някакъв текст.
Резултатът от този пример в прозорец на браузъра:
Как да зададете цвета, стила и размера на рамката в полетата.
В езиците за маркиране бордюрът ( граница), имат само таблици, снимки и рамки, в някои случаи е възможно да зададете цвета на границата и това е всичко.
Атрибут на границата
Каскадни стилови таблици ни дават повече възможности, но първо на първо място.
В CSS можем да контролираме ширината на границата с ширина на границатаили по -точно, можем да контролираме дебелината на всяка страна поотделно:
граница-отгоре-ширина- дебелината на горната граница
border-right-width- дебелина на дясната граница
border-bottom-width- дебелината на долната граница
граница-лява ширина- дебелина на лявата граница
Но може да има и стенографска форма:
P (ширина на границата: горе вдясно долу вляво;)(горе вдясно долу вляво).
Ширината на бордюра може да бъде зададена:
фигури DIV (широчина на границата: 5px), от нула до безкрайност, т.е. положителен.
тънък- тънка граница, DIV (широчина на границата: тънка)
среден- средна граница, DIV (широчина на границата: средна)
дебел- дебела граница, DIV (широчина на границата: дебела)
Ясно е с числата, но с тези стойности всичко зависи от браузъра, но все пак тънък<= medium <= thick
.
Можем също да контролираме цвета на границата с цвят на границатаили по -точно с цвета на всяка страна:
цвят на границата отгорецвят на горната граница;
цвят на границата вдясноцвят на дясната граница;
цвят на границата отдолуцвят на долната граница;
цвят на границата влявоцвета на рамката от лявата страна.
Стойността на цвета е зададена като за цвят, т.е. един от 16 цвята: аква, черно, синьо, фуксия, сиво, зелено, лайм, кестеняво, флот, маслиново, лилаво, червено, сребристо, синьо, бяло или жълто, също могат да се задават цветове: цвят: # 000000, цвят: # AF0 , цвят: rgb (255,0,0)или цвят: rgb (100%, 0%, 0%).
Без значение каква цветова схема ще изберете, браузърите пак ще я преведат цвят: rgb (255,0,0)... Например цвят: лайм = цвят: # 00ff00 = цвят: # 0F0 = цвят: rgb (0%, 100%, 0%), но за браузъра това няма значение цвят: rgb (0,255,0), т.е. ще изчисли тази стойност.
Ако дебелината и цветът на рамката могат да бъдат контролирани от HTML, тогава стилът ( граничен стил) Само CSS !!!
Стилът може да се контролира от всяка страна поотделно:
бордюрен топ стилстил на горната граница;
гранично-десен стилстил на дясна граница;
бордюрен стилстил на долната граница;
граничен-ляв стилстила на границата от лявата страна.
Сега нека разгледаме стиловите стойности:
1)граничен стил: няма- Това е по подразбиране, подобно на border-width: 0.
2)бордюрен стил: скрит- Същото, с изключение на таблици, които ще разгледаме по -късно.
3)бордюрен стил: пунктиран- пунктирана граница.
4)граничен стил: начертан- Граница с пунктирана линия.
5)бордюрен стил: плътен- Плътна граница на линията, т.е. както в HTML.
6)бордюрен стил: двоен- Двойна граница с плътна линия, тук се нуждаете от ширина на рамката от поне 3 пиксела.
7)бордюрен стил: жлеб- Границата изглежда така, сякаш е изсечена в платното.
8)бордюрен стил: хребет- Границата изглежда като стърчаща от платното.
9)бордюрен стил: вмъкнат- Цялата кутия изглежда като притисната в платното.
10)граничен стил: изход- Обратно на предишния.
Някои браузъри могат да игнорират пунктираните, пунктирани, двойни, канали, гребени, вмъкнати и изходящи стойности и да ги изведат като плътни, т.е. обичайната граница.
Разбира се, това е така, но всички примери по -горе са само принцип на действие, а не механизъм.
Правило собственост границапредполага (border: size style color;), това правило се изпълнява, ако и трите стойности присъстват и само в този ред, например H1 (рамка: 5px двойно червено;), но може да има изключения, ако тези стойности са предоставени от езици за маркиране, например за таблица ТАБЛИЦА (граница: 2px), т.е. е посочена само една стойност.
За да управлявате не целия бордюр, а всяка част поотделно, има правила:
(рамка отгоре: размер стил стил;)Управление на горния бордюр;
(вдясно: цвят в стил стил;)Контрол на бордюра вдясно;
(бордюр отдолу: размер стил стил;)Долен контрол на бордюра;
(границата вляво: размер стил стил;)Контрол на бордюра вляво.
Тези правила могат да се използват отделно или всички заедно.
Изключение прави това правило:
H1 (
рамка: 4px плътно зелено;
}
Работата е там, че в CSS последното правило има най-висок приоритет, в този случай граничното свойство съдържа border-left и затова правилото border-left ще бъде игнорирано, точно така:
H1 (
рамка: 4px плътно зелено;
граница вляво: 2px двойно червено;
}
От самото начало зададохме правилата за целия бордюр, а след това и за отделните зони.
Имам всичко по границите за елементите, с изключение на това, че ще разгледаме някои свойства, когато стигнем до таблици и други изключения.
CSS: граница. Границите на елемента.
Граници на CSS3
Граници на CSS3
С CSS3 можете да създавате заоблени рамки, да добавяте сенки към контейнерите и да използвате изображение като рамка - без да използвате програма за дизайн като Photoshop.
В този урок ще научите за следните свойства на границата:
- граница-радиус
- кутия-сянка
- гранично изображение
Поддръжка на браузъра
Имот
Поддръжка на браузъра
граница-радиус
кутия-сянка
гранично изображение
Internet Explorer 9 поддържа някои от новите свойства на границата.
Firefox изисква префикс -moz- за гранично изображение.
Chrome и Safari изискват префикса -webkit- за гранично изображение.
Opera изисква префикса -o- за гранично изображение.
Safari също изисква префикса -webkit- за box-shadow.
Opera поддържа нови свойства на границата.
CSS3 заоблени ъгли
Добавянето на заоблени ъгли към CSS2 беше сложно. Трябваше да използваме различни изображения за всеки ъгъл.
В CSS3 създаването на заоблени ъгли е лесно.
В CSS3 свойството border-radius се използва за създаване на заоблени ъгли:
Този блок има заоблени ъгли!
CSS3 Box Shadow
В CSS3 свойството box-shadow се използва за добавяне на сенки към контейнери:
CSS3 гранично изображение
Със свойството на CSS3 border-image можете да използвате изображение, за да създадете рамка:
Свойството на гранично изображение ви позволява да посочите гранично изображение!
Оригиналното изображение, използвано за създаване на рамката, е ваше:
Нови свойства на границата
Атрибут на границата
Атрибут на границата, таг
, използван за определяне на дебелината на границата около масата.
HTML рамки
Допустимо е да се използва рамка без стойности, тогава дебелината на границата ще бъде равна на един пиксел. По подразбиране рамката се показва с 3D ефекти, но ако допълнително приложите атрибута фон, рамката ще стане „плоска“.
Освен това, ако атрибутът border е различен от нула, тогава браузърите също показват тънки граници около самите клетки. Показването на тези граници може да се контролира с помощта на атрибута rules.
Стойностите
Стойността на атрибута може да бъде всяко неотрицателно число, определящо размера в пиксели.
Стойност по подразбиране: 0.
Синтаксис
Задължителен атрибут: Няма.
HTML пример: Прилагане на граничния атрибут
Примерен резултат
Резултат. Прилагане на атрибута на границата.
Псевдонимите на свойствата на границата на CSS създават границата на обект, а именно дебелината на рамката, нейния цвят и стил. Това свойство се използва широко в HTML. Можете да създавате различни ефекти, за да възприемате по -добре съдържанието на страницата. Например, проектирайте странична лента, заглавка на сайт, меню и т.н.
1. CSS граничен синтаксис
граница: цвят на границата в ширина на границата | наследявам;
- border -width - дебелина на границата. Можете да го зададете в пиксели (px) или да използвате стандартните стойности тънък, среден, дебел (те се различават само по ширина в пиксели)
- border -style - стилът на визуализираната рамка. Може да приема следните стойности
- няма или е скрит - отменя границата
- пунктирана - пунктирана рамка
- чертичка - тире рамка
- плътна - проста линия (използва се най -често)
- double - двойна граница
- жлеб - 3D гравирана граница
- гребен, вмъкване, начало - различни 3D рамкови ефекти
- наследяване - прилага се стойността на родителския елемент
- border -color - цвят на границата. Може да се зададе с помощта на конкретно име на цвят или в RGB формат (вижте имената на html цветове за сайта)
Забележка Стойностите в свойството на CSS границата могат да бъдат посочени в произволен ред. Най -често използваната последователност е "цвят на стил на дебелина".
2. Примери с различни CSS гранични граници
2.1. Пример. Различни стилове на гранична декорация в стил бордюр
border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover
и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P)
, где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width
: thin | medium | thick | значение
;
- thin
- тонкая толщина линии
- medium
- средняя толщина линии
- thick
- толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border
есть производные свойства для задания односторонних границ у элемента:
- border-top
- для задания рамки сверху (верхняя граница)
- border-bottom
- для задания рамки снизу (нижняя граница)
- border-right
- для задания рамки справа (правая граница)
- border-left
- для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color
- задание цвета верхний границы
- border-top-style
- задание стиля верхней границы
- border-top-width
- задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей:
*/
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius
(доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border
из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border
="VALUE
"
Рекомендуем
Как сделать в css все заглавные буквы Как сделать заглавные буквы при помощи css
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы...
- и
- - ширина на линията един пиксел
- - плътна линия
- - Бял цвят
- - черен цвят
- - сив цвят
- граница-радиус
- кутия-сянка
- гранично изображение
- border -width - дебелина на границата. Можете да го зададете в пиксели (px) или да използвате стандартните стойности тънък, среден, дебел (те се различават само по ширина в пиксели)
- border -style - стилът на визуализираната рамка. Може да приема следните стойности
- няма или е скрит - отменя границата
- пунктирана - пунктирана рамка
- чертичка - тире рамка
- плътна - проста линия (използва се най -често)
- double - двойна граница
- жлеб - 3D гравирана граница
- гребен, вмъкване, начало - различни 3D рамкови ефекти
- наследяване - прилага се стойността на родителския елемент
- border -color - цвят на границата. Може да се зададе с помощта на конкретно име на цвят или в RGB формат (вижте имената на html цветове за сайта)
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
Резултатът може да не е толкова впечатляващ, но демонстрира някои възможности:
H1 (широчина на границата: дебела; стил на границата: пунктиран; цвят на границата: злато;) h2 (ширина на границата: 20px; стил на границата: изход; цвят на границата: червено;) p (ширина на границата: 1px; бордюрен стил: начертан; цвят на границата: син;) ul (ширина на границата: тънка; стил на рамка: плътна; цвят на рамката: оранжев;)
Можете също така да зададете персонализирани свойства за горния, долния, десния и левия ръб на рамката. Ето как да го направите:
H1 (ширина на границата отгоре: дебела; стил на границата отгоре: плътна; цвят на границата отгоре: червена; ширина на границата отдолу: дебела; стил на границата отдолу: плътна; цвят на границата отдолу: син; граница-дясна ширина: дебела; граница-десен стил: плътна; граница-дясно-цвят: зелено; граница-лява ширина: дебела; граница-ляв стил: плътна; рамка-ляво-цвят: оранжево;)
Съкратена нотация
Както при много други свойства, можете да комбинирате няколко свойства в едно, като използвате границата на думата. Пример:
P (широчина на границата: 1px; стил на рамка: плътна; цвят на рамката: синьо;)
може да се комбинира в:
P (рамка: 1px плътно синьо;)
Резюме
В този урок научихте за неограничените възможности на CSS при използване на рамки.
В следващия урок ще разгледаме как да дефинираме размерите в модела на кутията - височина и ширина.
Имот CSS – « граница», Позволява ви да зададете дебелината, цвета и вида на периметровата линия около елемента. Параметрите на това свойство могат да бъдат записани на един ред, разделени с интервали и в произволен ред.
Граница с плътен елемент
Граница с пунктиран елемент
Граница с пунктирани елементи
Граница на елемент с двойна линия
Собственост на отделни участъци от границата
Релефна гофрирана рамка в обем
Изпъкнала гофрирана рамка в обем
Обемна депресирана рамка
Обемна изпъкнала рамка
Уроци / CSS /
Урок 7. Оформете CSS елемент
Почти всеки сайт използва свойство, което създава рамка около елемент. Той е необходим или за бутони, или за блокове с текст. За да създадете граница, елемент в CSS има две свойства: рамка и контур. Нека ги разгледаме.
граница
Това свойство е необходимо за задаване на граница около елемент, посочва нейната граница в уеб документ, ширината на рамката се взема предвид при позиционирането на елемента. Той има 3 стойности- цвят, дебелина и тип рамка.
Синтаксисът за граничното свойство е следният:
рамка: Тип ширина Цвят;
Можете да изберете различен ред за определяне на стойностите на свойствата, но основното е чрез интервал.
Дебелината (ширината) на рамката трябва да бъде посочена в пиксели (px) или процент (%).
Цветът може да бъде зададен или във формат RGB (червено зелено синьо) или в HTML шестнадесетичен код.
По -долу са ВИДОВЕ НА ЛИНИЯс техните имена:
Как да зададете граници на елемент? Правим следното:
#block (
бордюр: 3px solid # 0085cc; / * задайте синя линия 3px * /
}
Ако искате да инсталирате едно-две-три рамки от определена страна, тогава го посочваме така:
граничен връх- рамка отгоре;
граница-дъно- рамка в долната част;
граница-ляво- рамка вляво;
гранично-дясно- рамка вдясно;
Блокиране (
граница вдясно: 3px solid # 0085cc;
border-bottom: 2px прекъснато # 0085cc;
}
Ако искаш премахване на рамкиелемент в CSS, след това напишете в границата на свойството - няма
Празно (
граница: няма; / * елемент с празен клас няма да има граница * /
}
очертаване
Outline е свойството, от което се нуждаете, за да зададете външната граница на елемент.
Има две разлики от границата:
Първо, линията, дадена в контура, НЯМА да повлияе на позицията на самата кутия, нейната ширина и височина.
На второ място, няма възможност за инсталиране на рамка от определена страна.
Синтаксисът е същият като границата.
контур: 2px пунктиран # 0085cc; / * 2 пиксела пунктирана синя граница * /
За контур, както и за рамка, можете да премахнете граници, като не въведете нищо:
Благодаря за вниманието!
Предишна статия
Урок 6.
Границите на елемента.
Подложки и полета в CSS. Какво представляват маржът и подложката? Следващата статия
Урок 8. Как да зададете цвета на текста и фона на елемент в CSS?
Коментари към статията (vk.com)
граница
Поддръжка на браузъра
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
Свойството CSS ви позволява едновременно да зададете ширина, стил и цвят за границата на блока. Границата на блока е правилна линия / рамка, която обгражда блока от всички страни. Трябва да се има предвид, че когато добавите рамка, това ще повлияе на общия размер на блока.
Стойностите са разделени с интервал и могат да бъдат в произволен ред, браузърът ще определи кое от тях съответства на необходимия параметър. И трите стойности са незадължителни, ширината и / или цветът могат да бъдат пропуснати, като в този случай стойността, зададена за свойството по подразбиране, ще се използва вместо липсващата стойност, т.е. ако например не е посочена ширина, тогава ще се използва стойността по подразбиране на свойството. Таблицата под синтаксиса съдържа стойностите на кои свойства можете да използвате.
Забележка: За да зададете граници само на определени страни на елемент, използвайте следните свойства: border-top, border-bottom, border-left, border-right.
Съвет: Като цяло, когато използвате рамка, трябва да добавите подложка.
CSS свойство: border
Те добавят бяло пространство между рамката на блока и неговото съдържание: текст, изображения или дъщерни тагове. Обикновено рамката се показва близо до съдържанието на елемента, това е полезно само ако трябва да зададете рамка около картината.
Синтаксис
border: border-width-border-style border-color | наследяване;
Стойности на имотите
Пример
Тук има някакъв текст.
Резултатът от този пример в прозорец на браузъра:
Как да зададете цвета, стила и размера на рамката в полетата.
В езиците за маркиране бордюрът ( граница), имат само таблици, снимки и рамки, в някои случаи е възможно да зададете цвета на границата и това е всичко.
Атрибут на границата
Каскадни стилови таблици ни дават повече възможности, но първо на първо място.
В CSS можем да контролираме ширината на границата с ширина на границатаили по -точно, можем да контролираме дебелината на всяка страна поотделно:
граница-отгоре-ширина- дебелината на горната граница
border-right-width- дебелина на дясната граница
border-bottom-width- дебелината на долната граница
граница-лява ширина- дебелина на лявата граница
Но може да има и стенографска форма:
P (ширина на границата: горе вдясно долу вляво;)(горе вдясно долу вляво).
Ширината на бордюра може да бъде зададена:
фигури DIV (широчина на границата: 5px), от нула до безкрайност, т.е. положителен.
тънък- тънка граница, DIV (широчина на границата: тънка)
среден- средна граница, DIV (широчина на границата: средна)
дебел- дебела граница, DIV (широчина на границата: дебела)
Ясно е с числата, но с тези стойности всичко зависи от браузъра, но все пак тънък<= medium <= thick
.
Можем също да контролираме цвета на границата с цвят на границатаили по -точно с цвета на всяка страна:
цвят на границата отгорецвят на горната граница;
цвят на границата вдясноцвят на дясната граница;
цвят на границата отдолуцвят на долната граница;
цвят на границата влявоцвета на рамката от лявата страна.
Стойността на цвета е зададена като за цвят, т.е. един от 16 цвята: аква, черно, синьо, фуксия, сиво, зелено, лайм, кестеняво, флот, маслиново, лилаво, червено, сребристо, синьо, бяло или жълто, също могат да се задават цветове: цвят: # 000000, цвят: # AF0 , цвят: rgb (255,0,0)или цвят: rgb (100%, 0%, 0%).
Без значение каква цветова схема ще изберете, браузърите пак ще я преведат цвят: rgb (255,0,0)... Например цвят: лайм = цвят: # 00ff00 = цвят: # 0F0 = цвят: rgb (0%, 100%, 0%), но за браузъра това няма значение цвят: rgb (0,255,0), т.е. ще изчисли тази стойност.
Ако дебелината и цветът на рамката могат да бъдат контролирани от HTML, тогава стилът ( граничен стил) Само CSS !!!
Стилът може да се контролира от всяка страна поотделно:
бордюрен топ стилстил на горната граница;
гранично-десен стилстил на дясна граница;
бордюрен стилстил на долната граница;
граничен-ляв стилстила на границата от лявата страна.
Сега нека разгледаме стиловите стойности:
1)граничен стил: няма- Това е по подразбиране, подобно на border-width: 0.
2)бордюрен стил: скрит- Същото, с изключение на таблици, които ще разгледаме по -късно.
3)бордюрен стил: пунктиран- пунктирана граница.
4)граничен стил: начертан- Граница с пунктирана линия.
5)бордюрен стил: плътен- Плътна граница на линията, т.е. както в HTML.
6)бордюрен стил: двоен- Двойна граница с плътна линия, тук се нуждаете от ширина на рамката от поне 3 пиксела.
7)бордюрен стил: жлеб- Границата изглежда така, сякаш е изсечена в платното.
8)бордюрен стил: хребет- Границата изглежда като стърчаща от платното.
9)бордюрен стил: вмъкнат- Цялата кутия изглежда като притисната в платното.
10)граничен стил: изход- Обратно на предишния.
Някои браузъри могат да игнорират пунктираните, пунктирани, двойни, канали, гребени, вмъкнати и изходящи стойности и да ги изведат като плътни, т.е. обичайната граница.
Разбира се, това е така, но всички примери по -горе са само принцип на действие, а не механизъм.
Правило собственост границапредполага (border: size style color;), това правило се изпълнява, ако и трите стойности присъстват и само в този ред, например H1 (рамка: 5px двойно червено;), но може да има изключения, ако тези стойности са предоставени от езици за маркиране, например за таблица ТАБЛИЦА (граница: 2px), т.е. е посочена само една стойност.
За да управлявате не целия бордюр, а всяка част поотделно, има правила:
(рамка отгоре: размер стил стил;)Управление на горния бордюр;
(вдясно: цвят в стил стил;)Контрол на бордюра вдясно;
(бордюр отдолу: размер стил стил;)Долен контрол на бордюра;
(границата вляво: размер стил стил;)Контрол на бордюра вляво.
Тези правила могат да се използват отделно или всички заедно.
Изключение прави това правило:
H1 (
рамка: 4px плътно зелено;
}
Работата е там, че в CSS последното правило има най-висок приоритет, в този случай граничното свойство съдържа border-left и затова правилото border-left ще бъде игнорирано, точно така:
H1 (
рамка: 4px плътно зелено;
граница вляво: 2px двойно червено;
}
От самото начало зададохме правилата за целия бордюр, а след това и за отделните зони.
Имам всичко по границите за елементите, с изключение на това, че ще разгледаме някои свойства, когато стигнем до таблици и други изключения.
CSS: граница. Границите на елемента.
Граници на CSS3
Граници на CSS3
С CSS3 можете да създавате заоблени рамки, да добавяте сенки към контейнерите и да използвате изображение като рамка - без да използвате програма за дизайн като Photoshop.
В този урок ще научите за следните свойства на границата:
Поддръжка на браузъра
| Имот | Поддръжка на браузъра |
|---|---|
| граница-радиус | |
| кутия-сянка | |
| гранично изображение |
Internet Explorer 9 поддържа някои от новите свойства на границата.
Firefox изисква префикс -moz- за гранично изображение.
Chrome и Safari изискват префикса -webkit- за гранично изображение.
Opera изисква префикса -o- за гранично изображение.
Safari също изисква префикса -webkit- за box-shadow.
Opera поддържа нови свойства на границата.
CSS3 заоблени ъгли
Добавянето на заоблени ъгли към CSS2 беше сложно. Трябваше да използваме различни изображения за всеки ъгъл.
В CSS3 създаването на заоблени ъгли е лесно.
В CSS3 свойството border-radius се използва за създаване на заоблени ъгли:
Този блок има заоблени ъгли!
CSS3 Box Shadow
В CSS3 свойството box-shadow се използва за добавяне на сенки към контейнери:
CSS3 гранично изображение
Със свойството на CSS3 border-image можете да използвате изображение, за да създадете рамка:
Свойството на гранично изображение ви позволява да посочите гранично изображение!
Оригиналното изображение, използвано за създаване на рамката, е ваше:
Нови свойства на границата
Атрибут на границата
Атрибут на границата, таг
