Border только с одной стороны. Установка значений для сторон отдельно. Смещение внешней рамки outline-offset

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

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

Обозначения

Значения

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

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

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

Пример

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

Рис. 2. Применение свойства border

Объектная модель

Объект .style.border

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

Июнь 16, 2016

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

Зачем нужна прозрачная рамка?

При верстке очередного из макетов стояла такая задача: при наведении на пункт меню у него должно появиться подчеркивание. Причем не у текста, а у всего блока со ссылкой. Для тех кто разбирается в верстке, все достаточно просто и понятно в данном случае. Нужно просто при наведении на ссылку добавлять ей свойство border-bottom . Но если просто сделать так, то будет не очеь красиво и здорово. Сейчас я вам покажу пример. Вот такой html код нужен для создания простого меню на 4 пункта:

В общем, ему были прописаны некоторые стили, но все их я приводить не буду. Интересует нас именно эффект подчеркивания при наведении на пункт. Реализуется он так:

Menu li a:hover{ border-bottom: 5px solid brown; }

Все достаточно просто, но получается вот что (наведите на любой пункт):

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

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

Menu li a{ border-bottom: 5px solid transparent; }

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

Отлично, надеюсь я ответил на вопрос, для чего нужна в css прозрачная рамка. Возможно, у нее есть еще какое-то применение. Вернее, не возможно, а точно. С ее помощью можно создавать треугольники. Как, смотрите . Так что вот такие есть варианты применения прозрачной рамки.

В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы () элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.

Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.

Толщина границ задается свойством , при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

Синтаксис кода

Давайте разберем пример записи свойства:

url (images/bg-image.png) — адрес фоновой картинки.

30 — может быть одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления картинки. Сами единицы не пишутся, только число (10, а не 10px). На рисунке красными линиями выделены необходимые для создания рамки области.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в таблице.

round round — два параметра (для горизонтальных и вертикальных границ соответственно). Могут принимать одно из трех значений. Результат можно увидеть на картинках.

stretch — Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat — Повторяет рисунок границы.
round — Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.

Совместимость с браузерами

К сожалению, не все версии браузеров поддерживают свойство border-image. Для лучшей совместимости желательно прописать свойство для всех браузеров.

Пример кода:

Автоматизация

В сети есть инструменты, которые оказывают нам помощь в написании кода. Для свойства border-image есть очень удобный конструктор . Вы просто загружаете туда свою картинку границы (кстати, их очень много можно найти в инете). При помощи ползунков делите картинку на области, задаете толщину границ и параметры повторения.

Причем, сразу же, в онлайн режиме видите результат (то, что получится в итоге).

Когда добиваетесь неодходимого результата, Вам остается только скопировать сгенерированный код и вставить его в код страницы (файла css).

Очень просто и удобно.

Заключение

На этом мы заканчиваем рассмотрение свойств границ в CSS. Я с Вами не прощаюсь. В ближайшее время мы продолжим обучение верстке. Подписывайтесь на обновления ... и... До встречи!

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

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

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).

Рис. 1. Рамка вокруг элемента

Рамка при использовании:hover

При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).

Пример 2. Рамка при наведении

outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.

Пример 3. Рамка при наведении

Рамка вокруг полей формы

В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.

Рис. 2. Рамка вокруг полей

Пример 4. Убираем рамку

Рамки через box-shadow

Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.

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

В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .

Пример 4. Использование box-shadow

Результат данного примера показан на рис. 3.

Рис. 3. Рамки, созданные свойством box-shadow

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

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

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.

• border-style - стиль границы.
• border-width - ширина границы.
• border-color - цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

1. none - граница отсутствует (по умолчанию).
2. solid - сплошная граница.
3. double - двойная граница.
4. dashed - пунктирная граница.
5. dotted - граница из ряда точек.
6. ridge - граница "гребень".
7. groove - граница "бороздка".
8. inset - вдавленная граница.
9. outset - выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница "бороздка" (groove)

граница "гребень" (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) - стиль границы установлен для всех сторон блока.

Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.

Свойство border-width. Толщина границы.

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

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Код примера:

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

• thin - тонкая граница;
• medium - средняя толщина;
• thick - толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:

• Шестнадцатеричная запись (#ff00aa ) цвета.
• Формат RGB - rgb(255,12,110) . Формат RGBA для CSS3.
• Форматы HSL и HSLA для CSS3.
• Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Установка значений для сторон отдельно

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

• border-top (верхняя граница)
• border-right (правая граница)
• border-bottom (нижняя граница)
• border-left (левая граница)

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

Параметры верхней границы (border-top ).

• border-top-color - задаёт цвет верхней границы элемента.
• border-top-width - задаёт толщину верхней границы элемента.
• border-top-style - задаёт стиль верхней границы элемента.

Параметры правой границы (border-right ).

• border-right-color - задаёт цвет правой границы элемента.
• border-right-width - задаёт толщину правой границы элемента.
• border-right-style - задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom ).

• border-bottom-color - задаёт цвет нижней границы элемента.
• border-bottom-width - задаёт толщину нижней границы элемента.
• border-bottom-style - задаёт стиль нижней границы элемента.

Параметры левой границы (border-left ).

• border-left-color - задаёт цвет левой границы элемента.
• border-left-width - задаёт толщину левой границы элемента.
• border-left-style - задаёт стиль левой границы элемента.

Пример использования этих свойств:

Свойство border-radius. Округление углов границы.

Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

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

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;