Android cum să redimensionați chenarul elementelor de chenar. De ce aveți nevoie de o chenară transparentă în CSS și cum să o faceți

În articolul precedent am discutat aplicarea CSS proprietățile border() ale elementelor paginii. Și ți-am promis că îți voi spune cum să folosești imagini pentru a desena chenarele. Despre asta vom vorbi astăzi.

Pentru a folosi imagini pentru a crea chenare, vom folosi proprietatea CSS border-image.

Grosimea chenarelor este setată de proprietate, iar dacă se specifică chenar: 0, atunci chenarul nu este afișat. Cu alte valori de margine, imaginea are întotdeauna prioritate. Fundalul, dacă este specificat prin proprietatea de fundal, este afișat sub cadru.

Sintaxa codului

Să ne uităm la un exemplu de înregistrare a proprietății:

border-image: url (images/bg-image.png ) 30 rotund;

url (images/bg-image.png) — adresa imaginii de fundal.

30 - pot exista una, două, trei sau patru valori care indică dimensiunile părților imaginii în pixeli, definind astfel zonele de divizare a imaginii. Unitățile în sine nu sunt scrise, doar numărul (10, nu 10px). În figură, liniile roșii evidențiază zonele necesare pentru a crea cadrul.

Puteți utiliza una, două, trei sau patru valori, separate printr-un spațiu. Efectul depinde de numărul de valori și este prezentat în tabel.

rotund rotund — doi parametri (pentru marginile orizontale, respectiv verticale). Poate lua una dintre cele trei valori. Rezultatul se vede in poze.

întinde— Întinde desenul de chenar la dimensiunea elementului. Aceasta este valoarea implicită.
repeta— Repetează modelul de chenar.
rundă— Repetează desenul și îl scalează astfel încât să existe un număr întreg de imagini pe partea elementului.

Compatibilitate browser

Din păcate, nu toate versiunile de browser acceptă proprietatea imagine-chenar. Pentru compatibilitate mai bună Este recomandabil să înregistrați proprietatea pentru toate browserele.

Exemplu de cod:

stil de chenar : solid ; lățime chenar: 27px; -moz-border-image: url (http://mysite.ru/border.png) 27 round stretch; -webkit-border-image: url (http://mysite.ru/border.png) 27 round stretch; -o-border-image: url (http://mysite.ru/border.png) 27 round stretch; border-image: url (http://mysite.ru/border.png) 27 rotund intindere;

Automatizare

Există instrumente pe web care ne ajută să scriem cod. Există un constructor foarte convenabil pentru proprietatea border-image. Pur și simplu încărcați imaginea de chenar acolo (apropo, puteți găsi o mulțime de ele pe internet). Folosind glisoarele, împărțiți imaginea în zone, setați grosimea marginii și parametrii de repetare.

Mai mult, imediat, în modul online vezi rezultatul (ce se întâmplă până la urmă).

Când obțineți rezultatul dorit, tot ce trebuie să faceți este să copiați codul generat și să-l lipiți în codul paginii (fișier CSS).

Foarte simplu și convenabil.

Concluzie

Aceasta încheie discuția noastră despre proprietățile de frontieră în CSS. Nu-ți spun la revedere. În viitorul apropiat vom continua pregătirea în layout. Abonați-vă la actualizări...și...Ne vedem!

Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru o mai bună percepție a conținutului de pe pagină. 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 - margine 3D canelată
  • creastă, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea element părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau format RGB(vezi numele culorilor html pentru site)

Notă

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 "

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

Acest exemplu 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 în browsere diferite poate varia ușor atunci când se utilizează valorile de canelura , creasta , de inserare sau de început.

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.

×

Vlad Merjevici

CU folosind CSS Puteți adăuga o chenar la un element în mai multe moduri. Practic, desigur, proprietatea de frontieră este utilizată, ca cea mai universală, precum și contur și, în mod surprinzător, box-shadow , a cărei sarcină principală este de a crea o umbră. În continuare, vom lua în considerare aceste metode și diferențele dintre ele.

proprietatea conturului

Cea mai simplă proprietate pentru crearea cadrelor. Are aceiași parametri ca și border , dar diferă semnificativ în unele detalii:

• conturul este afișat în jurul elementului (chenar în interior);
• conturul nu afectează dimensiunile elementului (chenarul este adăugat la lățimea și înălțimea elementului);
• conturul poate fi setat numai în jurul întregului element, dar nu și pe părțile individuale (chenarul poate fi folosit pentru orice parte sau pentru toate deodată);
• conturul nu este afectat de raza de filet specificată de proprietatea border-radius (chenarul este afectat).

Se pune întrebarea - în ce cazuri este nevoie de contur, când rolul său, în ciuda diferențelor enumerate, este complet preluat de graniță? Nu există multe situații, dar apar:

• crearea de rame complexe multicolore;
• adăugarea unui cadru la un element atunci când treceți mouse-ul peste el;
• ascunderea chenarului pe care browserul îl adaugă automat unor elemente la primirea focalizării;
• pentru contur, puteți seta distanța de la marginea elementului la cadru folosind proprietatea outline-offset, pentru a crea un .

Rame multicolore

Trebuie să înțelegeți că conturul nu înlocuiește în niciun fel chenarul și poate exista împreună cu acesta, așa cum se arată în exemplul 1.

Exemplul 1: Crearea unui cadru

În acest exemplu, în jurul elementului este adăugat un cadru negru, care este separat de fundal printr-un chenar alb (Fig. 1).

Orez. 1. Încadrați în jurul elementului

Cadrul când se utilizează: hover

Când se adaugă un cadru prin chenar, lățimea elementului crește, ceea ce este destul de vizibil când se combină chenar și pseudo-clasa :hover. Există două moduri de a „câștiga” acest lucru. Cel mai simplu lucru este să înlocuiți chenar cu outline , care, după cum știm, nu afectează dimensiunea elementului (exemplul 2).

Exemplul 2: Cadru pe Hover

conturul nu este întotdeauna potrivit, fie și numai pentru că rotunjirea colțurilor nu îl afectează. A doua metodă este potrivită aici - adăugați un cadru invizibil sau un cadru care se potrivește cu culoarea de fundal, apoi schimbați parametrii acestuia când treceți cu mouse-ul (exemplul 3). Atunci nu va avea loc nicio deplasare a elementului, deoarece cadrul inițial există deja. Dar ne amintim întotdeauna că lățimea elementului este suma valorilor lățimii, marginea din stânga și chenarul din dreapta. Situația este similară cu înălțimea.

Exemplul 3: Cadru pe Hover

Chenar în jurul câmpurilor de formular

În unele browsere (Chrome, Safari, ultimele versiuni Opera) o pictogramă mică este afișată în jurul câmpurilor de formular atunci când acestea primesc focalizare. rama de culoare(Fig. 2). Pentru a-l elimina, trebuie doar să adăugați valoarea none la proprietatea contur din stiluri, așa cum se arată în exemplul 4.

Orez. 2. Încadrați în jurul marginilor

Exemplul 4. Scoaterea cadrului

Cadre prin box-shadow

Deși proprietatea box-shadow este destinată să adauge o umbră în jurul unui element, poate fi folosită și pentru a crea chenare care nu pot fi create folosind border sau outline . Acest lucru se datorează faptului că numărul de umbre poate fi nelimitat, ai căror parametri sunt enumerați separați prin virgule.

Pentru a obține un cadru, primii trei parametri ar trebui setați la zero, ei sunt responsabili pentru poziția umbrei și neclaritatea acesteia. Al patrulea parametru în acest caz este responsabil pentru grosimea chenarului, iar al cincilea setează culoarea chenarului. Pentru al doilea cadru, al patrulea parametru este egal cu suma grosimilor celor două rame.

Exemplul 4 arată cum să adăugați două cadre și un chenar la dreapta folosind o singură proprietate casetă-umbră.

Exemplul 4: Utilizarea box-shadow

Rezultat acest exemplu prezentat în Fig. 3.

Orez. 3. Cadre create de proprietatea box-shadow

chenar CSS Un element este una sau mai multe linii care înconjoară conținutul elementului și umplutura acestuia. Chenarul este specificat utilizând proprietatea shorthand border. Stilul cadrului este setat folosind trei proprietăți: stil, culoareȘi lăţime.

Decorarea cadrelor și chenarelor elementelor HTML folosind proprietăți CSS

1. Stil de chenar

În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului elementului, cu fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrul determină afișarea acestuia fără această proprietate, cadrele nu vor fi deloc vizibile. Pentru un element, puteți seta un chenar pentru toate părțile simultan folosind proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare pentru stilul chenar, etc. Nu moștenit.

stil de bordura (stil chenar-sus, chenar-stil dreapta, chenar-stil jos, chenar-stil stânga)
Valori:
nici unul	Valoarea implicită înseamnă că nu există cadru. De asemenea, elimină chenarul unui element dintr-un grup de elemente cu o valoare setată a acestei proprietati.
ascuns	Echivalent cu niciunul.
punctat	punctat
întreruptă	întreruptă
solid	solid
dubla	dubla
canelură	canelură
creastă	creastă
medalion	medalion
început	început
{1,4}	Afișarea a patru stiluri diferite pentru chenarul unui element simultan, doar pentru proprietatea stil bord: (stil de chenar: solid punctat, niciun punctat;)
iniţială
moşteni

Sintaxă

P (stil chenar: solid;) p (stil chenar: solid;)

2. Culoarea cadrului chenar-culoare

Proprietatea stabilește culoarea cadrelor pe toate părțile în același timp. Folosind proprietățile de clarificare, puteți seta o culoare diferită pentru marginea fiecărei părți a elementului. Dacă nu este specificată nicio culoare pentru cadru, aceasta va fi aceeași cu culoarea textului elementului. Dacă elementul nu are text, culoarea chenarului va fi aceeași cu culoarea textului elementului părinte. Nu moștenit.

chenar-culoare (culoare-chenar-sus-culoare, chenar-culoare-dreapta, chenar-culoare-jos, chenar-culoare-stânga)
Valori:
transparent	Se instalează culoare transparentă pentru cadru. În același timp, lățimea cadrului rămâne. Poate fi folosit pentru a schimba culoarea chenarului atunci când treceți mouse-ul peste un element pentru a evita deplasarea elementului.
culoare	Culoarea cadrelor este setată folosind valorile proprietății. (culoare-chenar: #cacd58;)
{1,4}	Transferul simultan de patru Culori diferite pentru chenarele elementului, numai pentru proprietatea border-color: (culoare-chenar: #cacd58 #5faf8a #b9cea5 #aab238;)
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Sintaxă

P (culoare-chenar: #cacd58;)

3. Lățimea chenarului

Lățimea cadrului este specificată folosind unități de lungime sau Cuvinte cheie. Dacă proprietatea de tip border-style este setată la niciunul și marginea elementului este setată la o anumită lățime, atunci în acest caz lățimea marginii este setată la zero. Nu moștenit.

Sintaxă

P (lățimea chenarului: 2px;)

4. Setarea unui cadru cu o singură proprietate

Proprietatea border vă permite să combinați următoarele proprietăți: border-width , border-style , border-color , de exemplu:

Div ( lățime: 100 px; înălțime: 100 px; chenar: 2 px gri solid; )

În acest caz, proprietățile specificate vor fi aplicate la toate marginile elementului simultan. Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

5. Setarea unui cadru pentru un chenar al unui element

În cazul în care este necesară setarea stil diferit limitele unui element, puteți utiliza notația scurtă pentru limita corespunzătoare.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista de proprietăți este specificată într-o ordine dată, în timp ce una sau două valori pot fi sărite, caz în care valorile lor vor prelua valorile implicite.

Stilul chenarului de sus este setat folosind proprietatea border-top, bottom-border-bottom, stânga-border-left și dreapta-border-right.

Sintaxă

P (chenar-sus: 2px gri solid;)

6. Contur exterior

Proprietatea specifică o margine exterioară în jurul elementelor (adică în afara graniței normale). Scopul principal al acestei proprietăți este de a evidenția un element. Spre deosebire de proprietatea border, aplicarea acestei proprietăți nu afectează dimensiunea sau poziția elementului, deoarece conturul este afișat deasupra blocului de elemente, ceea ce, la rândul său, poate duce la suprapunere marginile element și zonele învecinate.

De asemenea, conturul exterior, spre deosebire de cadrul elementului, înconjoară elementul pe toate părțile, încadrându-l în întregime.

Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea blocului pentru care este specificată raza de margine.

Proprietatea outline vă permite să combinați următoarele proprietăți: outline-color , outline-style , outline-width . Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

Div ( lățime: 100px; înălțime: 100px; contur: #cacd58 solid 2px; )

6.1. stil de contur

Aspectul liniei de contur externe este setat în mod similar cu stilul cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: creasta;)

6.2. Culoarea conturului exterior culoarea conturului

Culoarea conturului exterior poate fi specificată numai când valoarea stabilită stil de contur. Nu moștenit.

Sintaxă

P (stil contur: creasta; culoarea contur: argintiu; )

6.3. Grosimea conturului exterior latimea conturului

Grosimea liniei de contur exterioare este setată în mod similar cu grosimea cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: punctat; lățime contur: 5px; )