Cu câteva lecții mai devreme, ne-am uitat la o reprezentare schematică a unui bloc de pagină web și am vorbit, de asemenea, pe scurt despre marginea proprietății CSS, care poate fi folosită pentru a seta margini pentru un element. De data aceasta ne vom uita la această proprietate mai detaliat folosind exemple.

Chenarul este situat între margine și umplutură. Aceasta înseamnă că marja este in spate frontieră. Chenarul poate fi fixat pe toate cele patru laturi (ca și cum ar închide blocul într-un cadru), sau pe una, două sau trei laturi. CSS vă permite să controlați grosimea, culoarea și stilul chenarelor. Să studiem asta mai detaliat.

Border-width: lățimea chenarului

Proprietatea border-width setează lățimea chenarului. Cel mai adesea această dimensiune este indicată în pixeli. Puteți seta lățimi identice sau diferite pentru toate cele patru chenare, de exemplu:

/* toate cele 4 chenare au 2px lățime: */ border-width: 2px; /* chenarele de sus și de jos au 2px lățime, stânga și dreapta sunt 4px: */ border-width: 2px 4px; /* chenar superior - 2px, stânga și dreapta - 6px, jos - 3px: */ border-width: 2px 6px 3px; /* chenar de sus - 2px, dreapta - 3px, jos - 4px, stânga - 5px: */ border-width: 2px 3px 4px 5px;

În plus, există cuvinte cheie pentru a indica lățimea chenarului:

• subțire - chenar 2px lățime;
• mediu - chenar 4px lățime;
• gros - chenar 6px lățime.

Culoarea chenarului: culoarea chenarului

Proprietatea border-color specifică culoarea chenarelor. Culorile pot fi specificate în orice format CSS: Cuvinte cheie, în hexazecimal sau RGB - depinde ce este mai convenabil pentru tine. Prin analogie cu proprietatea anterioară, puteți seta fie o culoare pentru toate marginile, fie selectați culori diferite pentru fiecare chenar.

Culoare chenar: #FFFF00;

De asemenea, puteți seta o culoare transparentă scriind:

Chenar-culoare: transparent;

Border-style: stil de chenar

Mulțumită proprietate tip graniță puteți face un chenar punctat, dublu sau volumetric dintr-un chenar obișnuit - sunt multe sensuri diferite. Pentru a face acest lucru, utilizați următoarele cuvinte cheie:

• solid - chenar solid;
• punctat - chenar de puncte;
• punctat - chenar punctat;
• dublu - chenar dublu;
• marginea canelură - crestătură volumetrică;
• creasta - o margine voluminoasă cu o margine groasă (în esență o inversare a stilului anterior);
• start - chenar extrudat;
• inserție - o chenar indentat (în esență o inversare a stilului anterior).

Ca și în cazul proprietăților de lățime a chenarului și culoarea chenarului, fiecare chenar de bloc poate fi stilat diferit - de exemplu, puteți face chenarele de sus și de jos întrerupte, iar chenarele din dreapta și din stânga se dublează. Aici totul depinde doar de imaginație.

Stil chenar: punct dublu;

Notă: V browsere diferite aspect granițele pot fi ușor diferite.

Limită comună a proprietății CSS: 3 în 1

Pentru a stila un chenar, nu trebuie să utilizați pe rând toate cele trei proprietăți de mai sus. Este suficient să știți despre marginea generală a proprietății universale CSS, cu ajutorul căreia veți scrie un stil mult mai rapid și veți economisi spațiu. Pentru a face acest lucru, notați valorile pentru toate cele trei proprietăți în ordine aleatorie:

Chenar: 2px punctat #FF0000;

Limite pentru partide individuale

Cu ajutor proprietăți suplimentare chenar în CSS, puteți stila fiecare chenar de bloc individual. Următoarele proprietăți vă vor ajuta în acest sens:

• border-top - stil pentru chenarul de sus;
• border-right - pentru marginea dreaptă;
• border-bottom - pentru marginea de jos;
• border-left - pentru marginea stângă.

Rezultate

Acum că știi cum să faci chenare pentru blocuri, poți exersa să le faci. Există multe moduri de a descrie concis un stil fără a avea prea multe linii în el. fișier CSS. Un rol important aici îl joacă cunoașterea principiilor foilor de stil în cascadă. Să ne uităm la un exemplu.

Să presupunem că doriți să creați un cadru pentru bloc div cu trei margini gri solide și marginea de jos punctată în verde. Puteți scrie acest stil astfel:

Div ( chenar-dreapta: 8px dublu #FF0000; chenar-stânga: 8px dublu #FF0000; chenar-jos: 8px dublu #FF0000; chenar-sus: 4px punctat #FDD201; )

Dar aceasta este o postare prea lungă. Toate acestea pot fi scrise pe scurt:

Div ( chenar: 8px dublu #FF0000; chenar-sus: 4px punctat #FDD201; )

După cum am menționat mai sus, aici vom profita de proprietățile în cascadă ale CSS. Mai întâi scriem stilul pentru toate cele patru laturi ale cadrului, apoi specificăm stilul separat pentru chenarul de jos, suprascriind astfel parțial stilul anterior. Este foarte important să urmați această succesiune de linii.

Mini sarcină

Încercați să creați un chenar pentru div cu dimensiuni de 200x200 pixeli. Stilurile pentru cadru ar trebui să fie astfel:

• Faceți chenarele de sus și de jos solide solid, oferiți-le aceeași culoare la alegere și o lățime de 5 pixeli.
• Faceți chenarul din stânga întreruptă, 3 pixeli lățime, alegeți o culoare diferită de cea anterioară.
• Dublați chenarul drept dubla, 7 pixeli lățime, culoare diferită față de cele două anterioare.

În cele din urmă, lucrarea dvs. ar trebui să arate astfel (cu excepția culorii, pe care o alegeți):

Rezultatul sarcinii (vizualizare în Chrome)

Proprietatea chenar generică vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element. Valorile pot fi în orice ordine, separate printr-un spațiu, browserul însuși va determina care dintre ele corespunde proprietății dorite. Pentru a seta un chenar numai pe anumite laturi ale unui element, utilizați proprietățile border-top , border-bottom , border-left , border-right.

informatie scurta

Denumiri

Valori

Valoarea lățimii chenarului determină grosimea chenarului. Sunt furnizate mai multe valori de tip chenar pentru a-i controla aspectul. Numele lor și rezultatul acțiunii sunt prezentate în Fig. 1.

Fig.1. Stiluri de cadru

border-color setează culoarea chenarului, valoarea poate fi în orice format permis de CSS.

Exemplu

ÎN în acest exemplu Se adaugă un chenar dublu în jurul blocului. Rezultatul este prezentat în Fig. 2.

Orez. 2. Aplicarea proprietăţii de frontieră

Model de obiect

Un obiect.stil.chenar

Notă

Browser Internet Explorer până la a șasea versiune inclusiv, cu o grosime a marginii de 1 px, se afișează punctat ca punct . Cu o grosime de 2 px și mai mare, valoarea punctată funcționează corect. Această eroare este remediată în IE7, dar numai pentru toate marginile de 1px. Dacă unul dintre marginile blocului are o grosime de 2px sau mai mare, atunci în IE7 valoarea punctată se transformă în punctată .

Stilul de chenar poate varia ușor între browsere când se utilizează valorile groove , ridge , inset sau outset.

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

16 iunie 2016

Salutari tuturor. Astăzi vă voi spune de ce, atunci când așezați site-uri web, acestea creează uneori o chenar transparentă în CSS, adică un cadru invizibil al unui element.

De ce ai nevoie de un cadru transparent?

Când așezați un alt aspect, a fost setată următoarea sarcină: când treceți cu mouse-ul peste un element de meniu, acesta ar trebui să aibă o subliniere. Și nu pentru text, ci pentru întregul bloc cu link-ul. Pentru cei care înțeleg aspectul, totul este destul de simplu și clar în acest caz,. Trebuie doar să adăugați proprietatea de margine de jos atunci când treceți cu mouse-ul peste un link. Dar dacă o faci așa, nu va fi foarte frumos și sănătos. Acum vă voi arăta un exemplu. Ca aceasta cod html necesare pentru a crea meniu simplu cu 4 puncte:

În general, i s-au prescris unele stiluri, dar nu le voi da pe toate. Suntem interesați de efectul de subliniere atunci când trecem cu mouse-ul peste un articol. Este implementat astfel:

Meniu li a:hover( chenar-jos: 5px maro solid; )

Totul este destul de simplu, dar iată ce se întâmplă (indică orice articol):

De acord, nu e foarte frumos. În plus, o parte din conținut va fi localizat mai jos și se va deplasa cu 5 pixeli în jos de fiecare dată când trece cu mouse-ul. După cum știți, un cadru mărește dimensiunea unui element.

De fapt, pentru a rezolva problema, trebuie doar să setați inițial legătura la același cadru cu o grosime de 5 pixeli, dar într-o culoare transparentă. În acest caz, atunci când treceți cu mouse-ul, se va schimba doar culoarea cadrului.

Meniu li a( chenar-jos: 5px solid transparent; )

Am dat o singură proprietate, restul stilurilor nu ne interesează, le poți scrie chiar tu. Acum, când treceți cu mouse-ul, nu va apărea nicio zvâcnire, puteți verifica acest lucru:

Grozav, sper că am răspuns la întrebarea de ce este necesară o chenară transparentă în CSS. Poate are și alte întrebuințări. Sau, mai degrabă, nu se poate, dar cu siguranță. Cu ajutorul lui puteți crea triunghiuri. Cum, uite. Deci acestea sunt opțiunile pentru utilizarea unui cadru transparent.

Proprietate chenar CSS Funcționează pentru a crea marginea unui obiect, și anume grosimea cadrului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte Pentru percepție mai bună continutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxă de margine CSS

granita: border-width border-style border-color | moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau îl puteți utiliza valori standard subțire, mediu, gros (difer doar prin lățimea pixelilor)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • liniuță - cadru format din liniuțe
  • solid - linie simplă(utilizat cel mai des)
  • dublu - cadru dublu
  • groove - chenar 3D canelat
  • creastă, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau format RGB(vezi numele culorilor html pentru site)

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai frecvent utilizată este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

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 "

CSS3-рамка дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы элемента, а также использовать изображения для оформления границ элемента.

Закруглённые углы и рамки-изображения

1. Закругление углов с помощью border-radius

Поддержка браузерами

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for 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 {width: 100px; height: 100px; border: 5px solid;} .r1 {border-radius: 0 0 20px 20px;} .r2 {border-radius: 0 10px 20px;} .r3 {border-radius: 10px 20px;} .r4 {border-radius: 10px/20px;} .r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;} .r6 {border-radius: 10px 20px 30px 40px/30px;} .r7 {border-radius: 50%;} .r8 {border-top: 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. Рамки-изображения border-image

Поддержка браузерами

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} .

При помощи такого простого изображения можно получить вот такие рамки для элемента.

/* Пример 1 */ div { width: 260px; height: 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-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: round; }
Рис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice .

2.1. Ширина рамки-изображения border-image-width

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

Синтаксис

Div {border-image-width: 30px;} Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

Синтаксис

Div {border-image-source: url(border.png);}

2.3. Элементы рамки-изображения border-image-slice

Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть.

Синтаксис

Div {border-image-slice: 50 20;}
Рис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений.

Синтаксис

Div {border-image-repeat: repeat;} Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображения border-image-outset

Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений.

Синтаксис

Div {border-image-outset: 10px;}
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Смещение внешней рамки outline-offset

Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline .

4. Градиентная рамка

Значением border-image может выступать не только изображение, но и градиентная заливка.

Полупрозрачная рамка

В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .

Почтовый конверт