Pseudonimet e pronës kufitare CSS për të krijuar kufirin e një objekti, përkatësisht trashësinë e kufirit, ngjyrën dhe stilin e tij. Kjo pronë përdoret gjerësisht në HTML. Ju mund të krijoni efekte të ndryshme për perceptimin më të mirë të përmbajtjes në faqe. Për shembull, dizenjoni një shirit anësor, kokën e faqes në internet, menunë, etj.

1. Sintaksa e kufirit CSS

kufiri: ngjyra e kufirit në stilin e kufirit me gjerësi kufiri | trashëgoj;

• gjerësia e kufirit - trashësia e kufirit. Mund ta vendosni në pixel (px) ose të përdorni vlerat standarde të hollë, mesatar, të trashë (ato ndryshojnë vetëm në gjerësi në pixel)
• stili i kufirit - stili i kufirit të dhënë. Mund të marrë vlerat e mëposhtme
  • asnjë ose i fshehur - anulon kufirin
  • kornizë me pika - pika
  • thye - kornizë dash
  • vija e ngurtë - e thjeshtë (përdoret më shpesh)
  • dyshe - kufi dyfish
  • brazdë - kufi i groove 3D
  • kreshta, futja, fillimi - efekte të ndryshme të kornizës 3D
  • trashëgojnë - zbatohet vlera e prindit
• ngjyra e kufirit - ngjyra e kufirit. Mund të vendoset duke përdorur një emër specifik me ngjyra ose në formatin RGB (shih emrat e ngjyrave HTML për sitin)

Vlerat në vetinë e kufirit CSS mund të specifikohen në çdo rend. Sekuenca më e përdorur zakonisht është "ngjyra e stilit të trashësisë".

2. Shembuj me kufij të ndryshëm kufitarë të CSS

2.1 Shembull. Stilet e ndryshme të dekorimit të kufirit në stilin e kufirit

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 "

Михаил 2016-06-11 1 HTML и CSS 0

Как делается в css двойная рамка?

Всем привет. А вы знаете, как делать в css двойную рамку? Если нет, то прошу ознакомиться с этой небольшой заметкой. Дело в том, что это не сделаешь с помощью обычного border , тут нужно идти другим путем.

Если вы задаете рамку с помощью свойства border , то можете задать ее только одну. Но очень часто по дизайну может требоваться несколько рамок. В таком случае стоит воспользоваться псевдорамкой — тенью.

Двойная рамка с помощью box-shadow

Вообще если вы хотите подробнее изучить тень в css, то советую вам прочитать на соответствующую тему. В этой статье я не буду подробно объяснять синтаксис свойства, а просто покажу прием, как создать двойную рамку. Итак, создам обыкновенный блок, которому пропишу некоторые стили. Блок может быть любым и с любым содержимым. В моем случае это простой div, поэтому html код я даже не буду показывать. А вот стили:

Div{
background: #E0D8A3;
width: 180px;
height: 110px;
padding: 12px;
}

Ну типичный пример оформления блока.
Теперь создадим двойную рамку с помощью множественных теней. Добавлю в стили к блоку еще такое свойство:

Box-shadow: 0 0 0 1px #000, 0 0 0 10px #E0D8A3;

Вот так это выглядит:

Как видите, получилось достаточно симпатично. В box-shadow всего 5 параметров. Первый — смещение тени по горизонтали, второй — по вертикали. Третий и четвертый параметры — размытие и растяжение. Как видите, первые три мы не трогаем вообще. Размытие нам не нужно, потому что нам нужна резкая тень. Как видите, я прописывал четвертый параметр — растяжение. Он определяет, насколько тень будет больше элемента, к которому привязана.

По умолчанию все выглядит так — тень одинаковых размеров с элементом и лежит четко под ним. Если вы меняете растяжение, то тень начинает выступать за элемент. Именно так можно создавать рамки, абсолютно такие же, как свойством border . Ну а с пятым параметром, я думаю, все понятно — это цвет тени.

Как видите, я просто перечислил параметры для каждой новой тени через запятую. Я думаю, вы уже догадались, что таким же способом можно создать тройную рамку и т.д. Никаких ограничений тут нет. Собственно, как по мне вопрос закрыт, а если у вас есть какие-то вопросы, вы можете писать их в комментарии.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами CSS . Данное свойство используется достаточно часто, поэтому ему стоит уделить немного больше внимания.

И так, давайте предположим, что вокруг какого-то элемента нужно сделать рамку. Например, создадим заголовок и вокруг него сделаем рамку.

Параметры характеризующие рамку: 1) Толщина рамки, 2) Стиль рамки и 3) Цвет рамки. И давайте по порядку:

• 1. Толщина рамки: border-width:2px ;
• 2. Стиль рамки: border-style:solid ;
• 3. Цвет рамки: border-color:#ff0000 ;

Какие бывают стили рамок в CSS ? Ниже приведены все доступные стили рамок:

• dotted - Это точечная рамка.
• dashed - Это пунктирная рамка
• solid - Это сплошная рамка
• double - Это двойная рамка
• groove - Объемный вид
• ridge - Объемный вид
• inset - Объемный вид
• outset - Объемный вид

Теперь у нас есть все, чтобы создать рамку вокруг заголовка.

HTML

Создание рамки вокруг заголовка.

И сам стиль для рамки.

H2{ border-width: 2px; border-style: solid; border-color: #FF0000; }

В результате вокруг созданного заголовка появилась сплошная рамка красного цвета толщиной в 2px.

Рамка формируется из четырех сторон: Верхней , Правой , Нижней и Левой и, так как у нас указанно свойство border , то браузер по умолчанию рисует все четыре стороны рамки. Таким образом, если требуется задать рамку только с какой-то одной стороны, то используются приставки указывающие сторону, где создать рамку.

• top - Верх.
• right - Право
• bottom - Низ
• left - Лево

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; }

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

H2{ border-bottom-width: 2px; border-bottom-style: double; border-bottom-color: #FF0000; border-top-width: 2px; border-top-style: double; border-top-color: #FF0000; }

Теперь заголовок будет обводится красной рамкой сверху и снизу. Аналогично можно сделать и для других сторон.

Как Вы уже наверное заметили, запись получилась достаточно большая, поэтому существует сокращенный вид записи который за частую на практике и используется.

На картинке выше представлена структура сокращённой записи, где указывается свойство border и в качестве значений, через пробел, указывается ширина рамки - border-width , стиль рамки - border-style и цвет рамки - #ff0000 .

То есть браузер, увидев такую, сокращенную запись border:2px solid #ff0000 ; , так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

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

H2{ border-top:2px solid #ff0000; }

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

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

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

Толщина рамки

Толщина рамки определяется свойством border-width , которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для

,

,

и

Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

H1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

H1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }

Сокращённая запись

Как и для многих других свойств, вы можете объединить несколько свойств в одно, используя слово border. Пример:

P { border-width: 1px; border-style: solid; border-color: blue; }

можно объединить в:

P { border: 1px solid blue; }

Резюме

В этом уроке вы познакомились с безграничными возможностями CSS при использовании рамок.

В следующем уроке мы рассмотрим, как определять размеры в боксовой модели - height и width.

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Një div me një kufi të kuq 3px.

Mund të specifikoni një stil kufiri vetëm në njërën anë të një elementi. Për ta bërë këtë, përdorni pronat kufiri i sipërm (kufiri i sipërm), kufiri djathtas (kufiri i djathtë), kufiri poshtë (kufiri i poshtëm), kufiri majtas (kufiri i majtë).

Blloku i ndarjes me kufij të ndryshëm.

Në këtë shembull, secila anë e kutisë ka një trashësi, stil dhe ngjyrë të ndryshme të kufirit.

Merrni parasysh se si mund të krijoni një formë si kjo duke përdorur CSS:

Vlerat e kufirit - trashësia, stili dhe ngjyra - mund të vendosen veçmas duke përdorur veti të veçanta.

• stili i kufirit - stili i kufirit.
• gjerësia e kufirit - gjerësia e kufirit.
• ngjyra e kufirit - ngjyra e kufirit.

Le të shqyrtojmë secilën prej vlerave veç e veç.

Prona e stilit kufitar. Stili i kufirit.

Prona e stilit të kufirit përcakton stilin e kufirit. Në CSS, ndryshe nga HTML, kufiri i një elementi mund të jetë më shumë sesa një element solid. Vlerat e mëposhtme janë të vlefshme për stilin e kufirit:

1. asnjë - pa kufi (parazgjedhur).
2. i fortë - kufi i ngurtë.
3. dyshe - kufi dyfish.
4. thyer - kufi i thyer.
5. me pika - një kufi i një serie pikash.
6. kreshtë - kufiri i kreshtës.
7. zakon - kufiri i zakonit.
8. fut - një kufi i prerë.
9. fillimi - kufiri i ekstruduar.

Shembuj se si duken.

pa kufij (asnje)




kufi i ngurte




kufi dyfish (dyfish)




kufiri me pika




thyer kufirin (thyer)




kufiri i zakonit




kufiri i kreshtës




kufiri i ngulitur




kufiri i extruded (fillimi)

Nga rruga, nëse vendosni ngjyrën e kufirit në të zezë për kornizën e kreshtës, merrni rezultatin e mëposhtëm.

Një div me një kufi të zi dhe stil kreshtë.

Kufiri duket si i fortë, por kjo sepse stili i kreshtës krijohet duke shtuar një efekt të hijes së pikës së zezë dhe efekti i zi në kufirin e zi nuk është i dukshëm.

Duke përdorur karakteristikën e stilit të kufirit, stili i kufirit mund të vendoset për më shumë se vetëm të gjitha anët e bllokut. Possibleshtë e mundur të vendosni disa vlera për një pronë të stilit të kufirit, varësisht nga numri i vlerave, stili i kufirit do të caktohet në një numër tjetër të anëve të bllokut. Mund të vendosni një, dy, tre dhe katër vlera. Le të shohim shembuj për secilin rast.

Një vlerë (e fortë) - stili i kufirit është vendosur për të gjitha anët e bllokut.




Dy vlera (dyshe solide) - vlera e parë përcakton stilin për anët e sipërme dhe të poshtme, e dyta për anën.




Tre vlera (dy pika solide) - vlera e parë për pjesën e sipërme, e dyta për anën, e treta për pjesën e poshtme.




Katër vlera (pika të ngurta dyshe të ndërprera) - secila vlerë për njërën anë në drejtim të akrepave të orës duke filluar nga lart.

Prona me gjerësi kufiri. Trashësia e kufirit.

Prona me gjerësi kufiri përdoret për të vendosur trashësinë e kufirit të një elementi. Trashësia e kufirit mund të specifikohet në çdo njësi matëse absolute, siç janë pikselët.

Ashtu si me pronën e stilit kufitar, prona mund të vendoset gjithashtu në një deri në katër vlera. Le të shohim shembuj për secilin rast.





Kodi Shembull:

Një vlerë (2px) - trashësia e kufirit është vendosur për të gjitha anët e bllokut.


Dy vlera (1px 5px) - vlera e parë përcakton trashësinë për anët e sipërme dhe të poshtme, e dyta për anën.


Tri vlera (1px 3px 5px) - vlera e parë për anën e sipërme, e dyta për anët dhe e treta për pjesën e poshtme.


Katër vlera (1px 3px 5px 7px) - secila vlerë për njërën anë në drejtim të akrepave të orës duke filluar nga lart.

Ekzistojnë gjithashtu vlera të fjalëve kyçe për pronën me gjerësi kufiri. Ekzistojnë tre prej tyre:

• hollë - kufi i hollë;
• mesme - trashësi e mesme;
• trashë - kufi i trashë;

Trashësia e kufirit: e hollë.




Trashësia e kufirit: e mesme.




Trashësia e kufirit: e trashë.

Prona me ngjyrë kufiri. Ngjyra e kufirit.

Mjeti me ngjyrë bordure përdoret për të kontrolluar ngjyrën e kufirit. Ngjyrat për këtë pronë mund të vendosen duke përdorur çdo metodë të përshkruar në artikullin "Ngjyrat në CSS", përkatësisht:

• Shënimi heksadecimal (# ff00aa) i ngjyrës.
• Formati RGB - rgb (255,12,110). Formati RGBA për CSS3.
• Formatet HSL dhe HSLA për CSS3.
• Emri i ngjyrës, për shembull i zi. Për një listë të plotë të emrave të ngjyrave, shihni tabelën e emrave të ngjyrave CSS.

Prona me ngjyrë bordure mund të ketë gjithashtu një deri në katër vlera dhe i trajton ato në të njëjtën mënyrë si vetitë e mëparshme.

Një vlerë (e kuqe).




Dy vlera (e zeza e kuqe).




Tre kuptime (e kuqe e zezë e verdhë).




Katër kuptime (e kuqe e zezë e verdhë blu).

Tani le të kthehemi te problemi i përmendur më lart dhe të nxjerrim një formë:

Këtu është kodi që tërheq një formë të tillë, vetëm me madhësi më të madhe:

Vendosja e vlerave për faqet veç e veç

Siç u përmend më lart, ju mund të specifikoni vlerat e pronës kufitare vetëm për njërën anë të një blloku. Për këto qëllime, ka prona:

• kufiri i sipërm (kufiri i sipërm)
• kufiri djathtas (kufiri djathtas)
• kufiri-fund (kufiri i poshtëm)
• kufiri majtas (kufiri majtas)

Më lejoni t'ju kujtoj se të gjitha vetitë kanë tre vlera (trashësia, stili dhe ngjyra) në çdo mënyrë. Por ka veti që ju lejojnë të vendosni trashësinë, ngjyrën dhe stilin për secilën anë veç e veç. Shkrimi i këtyre vetive rrjedh nga sa më sipër.

Opsionet e sipërme të kufirit (kufiri i sipërm).

• border-top-color - Vendos ngjyrën e kufirit të sipërm të elementit.
• border-top-width - Vendos trashësinë e kufirit të sipërm të elementit.
• border-top-style - Vendos stilin e kufirit të sipërm të një elementi.

Opsionet e kufirit të djathtë (kufiri-djathtas).

• bordura-djathtas-ngjyra - Vendos ngjyrën e kufirit të djathtë të një elementi.
• border-right-width - Vendos gjerësinë e kufirit të djathtë të elementit.
• stili i kufirit të djathtë - Vendos stilin e kufirit të djathtë të një elementi.

Opsionet e kufirit të poshtëm (fundi i kufirit).

• bordura-fund-ngjyra - përcakton ngjyrën e kufirit të poshtëm të elementit.
• border-bottom-width - Vendos gjerësinë e kufirit të poshtëm të elementit.
• bordura-poshtë-stil - Vendos stilin e kufirit të poshtëm të një elementi.

Opsionet e kufirit të majtë (kufiri-majtas).

• border-left-colour - Vendos ngjyrën e kufirit të majtë të elementit.
• border-left-width - Vendos gjerësinë e kufirit të majtë të elementit.
• border-left-style - Vendos stilin e kufirit të majtë të elementit.

Një shembull i përdorimit të këtyre vetive:

Në këtë shembull, div-it i jepet së pari një kufi 3px dhe një stil solid nga të gjitha anët. Pastaj:
• ripërcaktoi ngjyrën e kufirit të sipërm me pronën e ngjyrës së kufirit në të kuqe,
• duke përdorur pronën me gjerësi kufiri të djathtë vendosni trashësinë e kufirit të djathtë në 10 px,
• duke përdorur karakteristikën e stilit të kufirit poshtë, stili i kufirit të poshtëm ripërcaktohet si i dyfishtë,
• duke përdorur vetinë me ngjyrë kufiri-majtas, kufiri i majtë është vendosur në blu.

Prona e rrezes kufitare. Duke rrumbullakosur qoshet e kufirit.

Prona e rrezes kufitare është për rrumbullakimin e cepave të kufijve të një elementi. Kjo pronë u prezantua në CSS3 dhe funksionon si duhet në të gjithë shfletuesit modernë, me përjashtim të Internet Explorer 8 (dhe më të vjetër).

Vlerat mund të jenë çdo numër i përdorur në CSS.

Prona e rrezes kufitare: 15px.

Nëse korniza e bllokut nuk është specifikuar, atëherë rrumbullakimi ndodh me sfondin. Këtu keni një shembull të rrumbullakosjes së një kuti pa bordurë, por me një ngjyrë sfondi:

Prona e rrezes kufitare: 15px.

Ka veti për rrumbullakimin e secilit cep të një elementi individualisht. Ky shembull përdor të gjithë ata:

Kufiri-sipër-majtas-rrezja: 15px; kufiri-lart-djathtas-rrezja: 0; kufiri-poshtë-djathtas-rrezja: 15px; kufiri-poshtë-majtas-rrezja: 0;

Prona e rrezes kufitare: 15px.

Edhe pse ky kod mund të shkruhet në një deklaratë: kufiri-rrezja: 15px 0 15px 0. Çështja është që vetia e rrezes kufitare mund të vendoset nga një deri në katër vlera. Tabela më poshtë rendit rregullat që rregullojnë reklama të tilla.

Duke studiuar me kujdes këtë tabelë, ju mund të kuptoni se rekordi më i shkurtër i stilit të kërkuar do të jetë si ky: kufiri-rrezja: 15px 0. Vetëm dy vlera.

Pak praktikë

Vizatimi i një limoni duke përdorur CSS.

Këtu është kodi për një bllok të tillë:

Marzhi: 0 auto; / * Vendoseni bllokun në qendër * / gjerësia: 200px; lartësia: 200px; sfond: # F5F240; kufiri: 1px solid # F0D900; rrezja kufitare: 10px 150px 30px 150px;

Ne tashmë kemi tërhequr formën:

Tani le të lëmë një trekëndësh prej tij:

Kodi i trekëndëshit është si ky:

Marzhi: 0 auto; / * Vendoseni bllokun në qendër * / mbushje: 0px; gjerësia: 0px; lartësia: 0; bordura: 30px e bardhë e fortë; kufiri-fund-ngjyra: e kuqe;