Содержание

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

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

Значение по умолчанию0
НаследуетсяНет
Процентная записьДа, относительно ширины блока
ПрименяетсяКо всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырех уголков.
2Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

Рис. 1. Радиус скругления для создания разных типов уголков

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

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

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

border-style — стили рамок | CSS справочник

Поддержка браузерами
12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border-style устанавливает стиль рамки для элемента. Можно использовать от 1 до 4 значений. Стиль устанавливается начиная с верхней позиции. Если задано два стиля подряд, это значит первое значение для верхней и нижней рамки, второе значение для правой и левой рамки.

  • border-style: dotted solid double dashed;
    • Верхняя рамка — точечная
    • Правая рамка — сплошная
    • Нижняя рамка — двойная
    • Левая рамка — пунктирная

  • border-style: dotted solid double;
    • Верхняя рамка — точечная
    • Правая и левая рамка — сплошные
    • Нижняя рамка — двойная

  • border-style: dotted solid;
    • Верхняя и нижняя рамка — точечные
    • Правая и левая рамка — сплошные

  • border-style: dotted;
    • Все четыре рамки — точечные

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.borderStyle=»dotted double»

Синтаксис

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;

Значения свойства

Значение Описание
none Указывает, что рамка отсутствует.
hidden Тоже самое что и значение «none».
dotted Точечная рамка.
dashed Пунктирная рамка.
solid Сплошная рамка.
double Двойная рамка.
groove Объемная рифленая вдавленная рамка.
ridge Объемная рифленая выпуклая рамка.
inset Объемная вдавленная рамка.
outset Объемная выпуклая рамка.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-width: 5px;
border-style: none;
}

Как в css сделать рамку

Сохраняем файл index.html , обновляем, смотрим . Согласитесь смотрится симпатичнее.

Далее если Вы помните уроки по HTML у нас идет вложенная таблица, которая состоит из двух столбцов: в первом расположено меню нашего сайта, а во втором текст самой страницы. Давайте сохраним общий стиль оформления web-страницы и обрамим каждый столбец рамкой черного цвета толщиной в 1px. Coздадим для каждого из этих столбщов свой стиль. Стиль для левого столбца (где меню) назовем .lefttd (левый столбец). Кроме того хорошо бы придать этому столбцу другой цвет вспоминайте преведущий урок, выбираем не очень темный цвет например #f6f6f6 , и дописываем в таблице стилей следующий код:

Листинг 4.3.

.lefttd { border:1px solid black; background-color:#f6f6f6;

}

Создаем отдельный стиль для правого столбца (в котором расположен текст основной страницы) назовем его .righttd (правый столбец). Отличаться этот стиль от преведущего будет только цветом фона в столбце, оставим его белым. Ранее мы уже с Вами упоминали что по умолчанию цвет и так белый, но все же лучше задать цвет фона. Если в браузере пользователя будет включена своя таблица стилей, цвет в этом столбце может оказаться каким угодно, например черным и просто сольется с цветом шрифта. Итак код для этого стиля будет выглядеть так:

Листинг 4.4.

.righttd { border:1px solid black; background-color:#ffffff;

}

Сохраняем файл таблицы стилей и переходим в файл index.html . Находим теги td левого иправого столбцов вложенной таблицы и прописываем новые классы.

Рамки можно создавать не только совсех сторон элемента но и с любой стороны например только сверху или снизу , слева или справа. Прописав в стиле следующее свойство border-bottom:1px solid black; мы получим рамку толщиной в 1 пиксель снизу элемента, border-top – сверху, border-left – слева, border-right – справа.

И в заключении для сохранения общего стиля давайте придадим рамку черного цвета толщиной в один пиксель нижнему графическому элементу. Создаем простенький стиль .footer для футера сайта (нижнего графического элемента).

Вот что у нас получилось. Согласитесь так смотрится гораздо приятнее. Я надеюсь что Вам все понятно, а для закрепления навыков потренируйтесь самостоятельно с остальными файлами тестового сайта, а именно Ауди , БМВ , Рено , Тойота.

Как сделать рамку вокруг изображения через CSS | Серьезный блог о серьезном

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

Я создал демонстрационную страницу, на которой разместил несколько вариантов использования рамки вокруг изображений средствами CSS. Если вы хотите применить рамку ко всем имеющимся картинкам на сайте, то пишите CSS стили к тегу img, а если только к избранным изображениям, то придумайте к ним название классов. Об этом сейчас расскажу подробнее. Посмотрите для начала демо версию того, что мы получим.

Демо

Я использовал 3 фотографии и сделал к ним разные рамки. Но перед этим задал им размер и необходимые отступы. Это делается для каждого случая индивидуально. В моем примере это выглядит так:

img {height: 300px; margin-left: 45px; width: 200px;}

img {height: 300px; margin-left: 45px; width: 200px;}

К картинкам я прописал классы. На первом изображении получилась белая рамка размеров 10 пикселей и скругленными углами радиусом 10 пикселей. А так же, для разнообразия, я добавил ко всем изображениям псевдокласс hover, чтобы были видны изменения при наведении курсора и CSS3 тень. Тень кстати, вы сможете увидеть не во всех браузерах. Весь CSS код выглядит вот так:

1 2 3 4 5 6.one{border: 10px solid #FFF;border-radius: 10px; box-shadow: 2px 3px 8px -2px;} .one:hover{box-shadow:none; border-color: #adffcc;} .two{border: 10px solid #333; box-shadow: 0 0 8px 1px;} .two:hover{border-color:#666; box-shadow:none;} .three{border: 10px solid #2990FC; border-radius: 10px 0 10px 0; box-shadow: -2px 4px 5px -1px;} .three:hover{box-shadow:none; opacity:0.8;}

.one{border: 10px solid #FFF;border-radius: 10px; box-shadow: 2px 3px 8px -2px;} .one:hover{box-shadow:none; border-color: #adffcc;} .two{border: 10px solid #333; box-shadow: 0 0 8px 1px;} .two:hover{border-color:#666; box-shadow:none;} .three{border: 10px solid #2990FC; border-radius: 10px 0 10px 0; box-shadow: -2px 4px 5px -1px;} .three:hover{box-shadow:none; opacity:0.8;}

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

как сделать рамку в css

CSS рамку можно реализовать с помощью двух свойств border и outline.

border CSS

Свойство border-style
Свойство border-color

По умолчанию border-color совпадает с color (цвет текста)

Чтобы сделать прозрачную рамку достаточно цвет написать в rgba: теория, конвертер.

Свойство border-width
Другое написание, где для каждой стороны есть своё свойство

Как рассчитывается ширина элемента HTML. В чём разница между border и outline

margin: 30px; padding: 15px; width: 100px; outline-width: 10px; или border-width: 10px;

Ширина = 60 margin + 30 padding + 100 width.

Ширина = 60 margin (40 + 20 outline) + 30 padding + 100 width.

margin, padding, outline, border при расчётах ширины нужно удвоить, поскольку учитываются и левая, и правая стороны. Поочерёдно наведите курсор на две ссылки в предыдущем предложении. Другой пример почему происходит смещение в div

Как сделать рамку из нескольких цветов HTML

CSS прозрачная картинка

10 комментариев:

Анонимный Ничего особенного здесь нет! Инфа устарела уже на лет 8..как минимум. NMitra А какую рамку вы хотите? Что вы ожидали увидеть? Что значит устарела? Вы не пользуетесь свойством border?

Источник: http://shpargalkablog.ru/2012/02/css-ramka.html

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

Каждая рамка имеет три параметра, которыми мы можем управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с помощью каких свойств можно их задавать и изменять:

  • border-width — задает ширину рамки. Для установки ширины можно использовать пиксели или ключевые слова: thin , medium , thick .
  • border-style — определяет стиль рамки с помощью одного из восьми возможных значений: solid , dotted , dashed , double , groove , ridge , inset и outset .

Вместо использования всех трех свойств, можно использовать всего одно — CSS свойство border, которое позволяет одновременно задать ширину, стиль и цвет для рамки в одном объявлении:

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

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

Источник: http://puzzleweb.ru/css/10_boxmodel2.php

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

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

  • Содержание:
  • 1. Стиль рамки border-style
  • 2. Цвет рамки border-color
  • 3. Ширина рамки border-width
  • 4. Задание рамки одним свойством border
  • 5. Задание рамки для одной границы элемента border-top , border-bottom , border-left , border-right
  • 6. Внешний контур outline
  • 6.1. Стиль внешнего контура outline-style
  • 6.2. Цвет внешнего контура outline-color
  • 6.3. Толщина внешнего контура outline-width
1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style :
2. Цвет рамки border-color

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

Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color :
3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width :
4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

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

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы. Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Источник: http://html5book.ru/css-border/

Подскажите, пожалуйста, можно ли чисто на CSS сделать вот такую обводку блока, которая перерывается и на концах нее кружочки?

  • Вопрос задан 05 янв.
  • 239 просмотров

Сергей Коноваленко, Элемент предназначен для группирования элементов формы. Такая группировка облегчает работу с формами, содержащими большое число данных, например, один блок может быть предназначен для ввода текстовой информации, а другой — для флажков.

У вас форма? Нет. Семантичное решение есть? Да.

Зачем городить помойку без необходимости?

Источник: http://toster.ru/q/493721

Рассмотрим некоторый документ. На нем сформированы (отображены на экране в браузере) html-элементы. Они формируются на основании тегов. Вы расставляете теги, их обрабатывает парсер html (есть в любом браузере) и строит html-элементы. И как будут выглядеть эти элементы, определяет CSS.

Отступы и рамки

У всех html-элементов есть 4 области: область внешних отступов, рамка, внутренние отступы и содержание элемента. Для чего они нужны?

  • Внешние отступы (margin) — нужны, чтобы регулировать взаимодействие этого элемента с границами других элементов.
  • Внутренние отступы (padding) — это расстояние от рамки до содержания данного элемента.
  • Содержание самого элемента. Тут и так понятно. Если есть вложенные элементы, то они в этой области и находятся.
  • Рамка (border). Очерчивает границы элемента. Схематично 4 области можно представить так:

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

Внешние отступы

Это когда наш элемент взаимодействует с границами контейнера и с границами соседних элементов (те, которые в коде расположены рядом с ним). Основные правила:

  • margin-top: auto|величина|% — отступ сверху.
  • margin-right: auto|величина|% — отступ справа.
  • margin-bottom: auto|величина|% — отступ снизу.
  • margin-left: auto|величина|% — отступ слева.
  • margin: margin-top margin-right margin-bottom margin-left — сборное правило.

Значение «auto» — значит самостоятельный разбор браузером этих величин. Размер отступа можно указать в величинах: em, ex, px. Проценты (%) считаются от ширины контейнера (от области контента родительского элемента). Если указать отрицательное значение, то границы элементов внутри родительского контейнера наедут друг на друга.

Правило «margin» — сборное, здесь указываются значения всех 4-х отступов (начиная сверху и по часовой стрелке). Примеры:

Внутренние отступы

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

  • padding-top: величина|%.
  • padding-right: величина|%.
  • padding-bottom: величина|%.
  • padding-left: величина|%.
  • padding: padding-top padding-right padding-bottom padding-left — сборное правило. По аналогии с «margin».
Рамки в CSS

У всех рамок есть следующие характеристики:

  • Толщина — border-width: величина (thin|medium|thick). По умолчанию — medium.
  • Цвет — border-color: цвет. По умолчанию — цвет шрифта в этом элементе.
  • Тип — border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset. Типы: нет рамки | точками | пунктиром | сплошная | двойная | имитация рельефа.

Сами правила рамки:

  • border-top- (width|color|style).
  • border-right- (width|color|style).
  • border-bottom- (width|color|style).
  • border-left- (width|color|style).
  • border: border-width border-style border-color. Сборное правило.

Источник: http://1st-network.ru/prog/ramki-css

как сделать рамку в css Ссылка на основную публикацию

Компьютерные курсы по направлениям:

Для начинающих

A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты

B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация

C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии

E

Курсы сборки ПК, системных администраторов и защиты информации!

Как сделать css рамку | coderistu.ru

Всем привет. На связи coderistu.ru. В этой статье мы рассмотрим, как сделать различные html — рамки на сайте с помощью сss.

Стили рамок

Допустим, у нас есть текстовый блок, который нуждается в простой, но красивой css рамке. Сделать ее нам поможет свойство border:

Пример:

Привет, я текст.)

CSS стили:

p {
text-align:center;
padding:15px;
border:2px solid #F44336;
}

Здесь 

2px — толщина рамки, solid — стиль,  #F44336 —цвет

Отлично, рамка готова. Теперь можно навести немного красоты и поменять ее стиль:

1. Пунктирная рамка:

border:2px dashed #F44336;

Привет. Я — текст)

    2. Рамка из точек:

border:2px dotted #F44336;

Привет. Я — текст)

    3. Двойная:

border:3px double #F44336;

Привет. Я — текст)

4. Двухцветная двухконтурная:

border:4px groove #F44336;

Привет. Я — текст)

5. Двухцветная двухконтурная — зеркальный вариант предыдущей:

border:4px ridge #F44336;

Привет. Я — текст)

6. Просто двухцветная:

border:4px inset #F44336;

Привет. Я — текст)

7. Двухцветная  — зеркальный вариант предыдущей:

border:4px outset #F44336;

Привет. Я — текст)

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

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

Пример:

p {
text-align:center;
padding:15px;
border-style:solid dotted dashed double;
border-width: 2px 3px 4px 5px;
border-color: #2196F3 #E91E63 #e2e218 #8BC34A;}

Привет. Я — текст)

 

Рамка с одной или нескольких сторон

Чтобы сделать рамку с одной или нескольких сторон блока, можно пойти 3 путями:

  1. Задать нулевую толщину стенки через border-width. Например, border-width: 2px 0px 0px 0px.
  2. Сделать стенку прозрачной через border-color. Например, border-color: transparent #E91E63 #e2e218 #8BC34A.
  3.  Задать стиль через следующие свойства: border — left (левая), border — right (правая), border — top (верхняя), border — bottom (нижняя).

Пример:

p {
text-align:center;
padding:15px;
border-left: 5px double #8BC34A;}

Привет. Я — текст)

Внутренняя рамка 

Рамку внутри блока можно сделать при помощи css — свойства outline. 

Пример:

p {
text-align:center;
padding: 20px;
outline: 1px dashed #fff;
background: #000;
outline-offset: -10px;
color: #fff
}

Привет. Я — текст)

На это все. Мы научились делать рамки разных стилей с помощью css. Надеюсь, что статья была вам полезной!
P.S. Кстати, недавно наткнулся на интересный сайт по продаже часов. Если вы давно мечтали купить часы касио, то вам определенно стоит сюда заглянуть)

 

Создание рамок в CSS. Свойство border.

Свойство для оформления текста и шрифта мы изучили, теперь пришла очередь переходить к другим элементам. В этом уроке мы рассмотрим, создание рамок средствами 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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
 
Создание рамки вокруг заголовка.
 
</body>
</html>

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

CSS

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

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

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

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

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

CSS

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

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

CSS

h3{
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;, так же создаст рамку со всех четырех сторон заголовка. Вот такая короткая запись эквивалентна той записи, что мы использовали выше (где применялось три свойства).

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

CSS

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

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

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


Border-image • Про CSS

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

Спецификация: w3.org/TR/css3-background/#border-images.

Это свойство позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.

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

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

Пример:

Используемые изображения:

Можно использовать не только квадратные картинки, но и овальные:

Картинки из примера:

При этом border-radius не влияет на border-image, так что круглые картинки для рамки — единственный способ сделать округлую рамку.

Главное требование — симметричность изображений.

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

Поизменяйте размер браузера, чтобы увидеть как рамка адаптируется вместе с элементом:

Или откройте этот пример в отдельном окне.

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

Картинка:

Самый короткий способ задать изображение для рамки выглядит вот так:

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png") 25% round;

Результат:

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

Для border-image обязательно задавать изображение (border-image-source), размер угловой части (border-image-slice) и повторение картинки (border-image-repeat).

Заданная картинка режется вот по такой схеме:

Желтым выделены угловые части, размер которых задается свойством border-image-slice, зеленым — заполняющие.

Рассмотрим отдельные свойства border-image.

Border-image-source

Возможные значения: none или <image>.

Теоретически, можно задавать и градиенты, но они работают в Хроме/Сафари и не работают в FF. С их помощью можно было бы делать резиновые тени неправильной формы, вот такие, например (смотреть в Хроме). С градиентами можно делать и более странные варианты, причем узоры сами заботятся о своей пропорциональности. Примеры ниже на момент написания статьи работают только в Хроме и Сафари.

Upd: В Firefox работают начиная с 29-й версии.

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source, картинка заполнит собой уголки, не зная что ей делать дальше:

border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

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

Возможные значения:

<проценты> — рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.

<числа> — пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.

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

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

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

border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;

Border-image-repeat

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

Возможные значения:

stretch — растягивает заполняющий участок картинки. Значение по умолчанию;

repeat — повторяет заполняющий участок, при этом видны места стыков с угловой картинкой;

round — заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие.

space — действует похоже на repeat. Разницы не обнаружила.

Можно задать два значения сразу, первое будет отвечать за поведение картинки в верхней и нижней рамке, второе — за левую и правую.

border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;
border-image-repeat: repeat;

Слева repeat, справа round.

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее:

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width, картинка рамки заползет под содержимое, даже если не заданно свойство fill.

Возможные значения:

<длина> — значения в px или em;

<%> — значения в процентах относительно размера изображения;

<числа> — числовое значение, на которое умножается border-width

auto — ключевое слово. Если оно задано, значение равно соответственному border-image-slice. Если подходящего размера нет, используется значение border-width, при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 80;
border-image-repeat: round;
border-image-width: 160px;

Справа рамка с border-image-width. На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

Интересное свойство, позволяющие отодвинуть рамку за пределы элемента. Отрицательные значения не поддерживаются.

Возможные значения:

<длина> — значения в px или em;

<числа> — числовое значение, на которое умножается border-width.

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 120;
border-image-repeat: round;
border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset. Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы:

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

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

Приготовьте подходящую картинку и посмотрите как border-image легко справится с задачей с помощью всего лишь пары строчек кода:

Можно менять размеры блока и добавлять в него сколько угодно текста — тень будет растянется вслед за ним.

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

Изображения рамок нагуглены по запросу «рамки». Картинка с джедаями — фотожаба.

Рамка блока в CSS

Создание рамки блока

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

  • ширину рамки
  • стиль рамки
  • цвет

Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:

border-width: medium — средняя (по умолчанию)

border-width: thin — тонкая

border-width: thick — толстая

border-width: ширина в единицах измерения CSS

border-width: inherit — значение принимается от родительского элемента

Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

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

solid

dotted

dashed

double

inset

outset

groove

ridge

При маленькой ширине рамка может выглядеть по-другому.

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

border-style: none — отсутствие рамки

border-style: hidden — то же, что и none, применяется к ячейке таблицы

border-style: inherit — значение принимается от родительского элемента

Цвет рамки устанавливает свойство border-color. Значением свойства является цвет, указанный одним из способов, существующих в CSS.

Создадим блок и зададим ему рамку.

Стиль:

+

7
8
9
10
11
12

#div1
  {
  border-width: 1px;
  border-style: solid;
  border-color: Red;
  }

HTML код:

16

<div>Блок с рамкой</div>

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

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

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

17

<div>Блок с рамкой</div>

Если не указать ширину или цвет, то будет использовано значение по умолчанию.

Отдельные стороны рамки

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

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

18

<div>Блок<br>с рамкой<br>слева</div>

Создайте рамку у этого блока с других сторон с разным видом.

Для любой стороны рамки можно указать каждое свойство отдельно:

border-left-width, border-left-style, border-left-color

border-right-width, border-right-style, border-right-color

border-top-width, border-top-style, border-top-color

border-bottom-width, border-bottom-style, border-bottom-color

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

Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.

Стиль:

13
14
15
16
17
18

#div2
  {
  border-width: 5px 2px 3px 7px;
  border-style: solid;
  border-color: #D118CB;
  }

HTML код:

25

<div>Блок с рамкой с разной шириной</div>

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

border — CSS: Cascading Style Sheets

Это свойство является сокращением для следующих свойств CSS:

 
граница: сплошная;


граница: 2 пикселя с точками;


граница: outset # f33;


граница: средне-пунктирная зеленая;


граница: наследование;
граница: начальная;
граница: не задана;

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

Примечание: Граница будет невидимой, если ее стиль не определен.Это связано с тем, что по умолчанию используется стиль , нет .

Значения

<ширина линии>
Устанавливает толщину границы. По умолчанию средний , если отсутствует. См. border-width .
<стиль-линия>
Задает стиль границы. По умолчанию нет , если отсутствует. См. с рамкой .
<цвет>
Задает цвет границы.По умолчанию текущий цвет , если он отсутствует. См. border-color .

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

Граница Сокращение особенно полезно, если вы хотите, чтобы все четыре границы были одинаковыми. Однако, чтобы сделать их отличными друг от друга, вы можете использовать свойства longhand border-width , border-style и border-color , которые принимают разные значения для каждой стороны.В качестве альтернативы вы можете настроить таргетинг на одну границу за раз с помощью физических (например, border-top ) и логических (например, border-block-start ) свойств границы.

Границы и очертания

Границы и очертания очень похожи. Однако очертания отличаются от границ следующим образом:

  • Контуры никогда не занимают места, поскольку они рисуются вне содержимого элемента.
  • Согласно спецификации, очертания не обязательно должны быть прямоугольными, хотя обычно они и есть.
  <ширина линии> || <стиль-линия> || <цвет>, где <ширина линии> = <длина> | тонкий | средний | толстый <стиль-линии> = нет | скрытый | пунктирная | пунктирная | твердый | двойной | паз | гребень | вставка | исходный <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>, где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |

Установка розовой начальной границы

HTML 
  
 У меня есть рамка, контур и тень блока! Удивительно, не правда ли?
CSS 
  div {
  граница: 0.5rem начальный розовый;
  наброски: твердый хаки 0,5 бермуды;
  box-shadow: 0 0 0 2рем небесно-голубой;
  радиус границы: 12 пикселей;
  шрифт: жирный 1rem без засечек;
  маржа: 2бэр;
  набивка: 1 бэр;
  смещение контура: 0,5 бэр;
}
Результат

Таблицы BCD загружаются только в браузере

Создание границы тела | CSS-уловки

Эта статья изначально была опубликована 25 февраля 2008 г., но сейчас она полностью переписывается, чтобы сделать ее более полной и показать современные методы.

На сайте Джона Хика Hicksdesign я впервые увидел концепцию «границы тела».В данном случае это очень тонкий и красивый эффект.

Характеристики бордюра кузова:

  • Обойти все окно браузера до края независимо от размера экрана
  • Все края остаются на месте при прокрутке страницы
  • Контент выходит за границы при прокрутке страницы

Посмотреть демо

Техника №1: четыре дивизиона

Способ сделать это с максимальной кроссбраузерностью — это использовать четыре элемента.Hicksdesign делает это таким образом, используя четыре элемента , и в комментарии HTML сообщает следующее:

Я использую границы тега b, потому что это просто визуальный материал, не имеющий смысла, поэтому я также могу использовать самый маленький тег, который смогу найти.

Несмотря ни на что, это презентационная разметка, которая не идеальна. Здесь мы будем использовать div:

.

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

  #top, #bottom, #left, #right {
фон: # a5ebff;
положение: фиксированное;
}
#лево право {
верх: 0; внизу: 0;
ширина: 15 пикселей;
}
#left {left: 0; }
#right {right: 0; }

#top, #bottom {
слева: 0; справа: 0;
высота: 15 пикселей;
}
#top {top: 0; }
#bottom {bottom: 0; }

Это должно нормально работать в IE 7 и выше и практически в любом другом хорошем браузере для настольных ПК.Для IE 6, который не поддерживает фиксированное позиционирование, мы просто избавимся от него (без вреда, без фола) с помощью условного комментария в заголовке:

Мы также должны отказаться от этого на маленьких экранах (вероятно, мобильных), которые также не поддерживают фиксированное позиционирование:

  @media

/ * Довольно маленькие экраны, включая айфоны * /
только экран и (max-width: 500px),

/ * iPad * /
только экран и (min-device-width: 768px) и (max-device-width: 1024px)

{
# сверху, # снизу, # слева, # справа {display: none; }
}

Итак, теперь мы получаем эффект там, где хотим, а не там, где нет:

Метод № 2: Псевдоэлементы

В приведенном выше примере для выполнения работы нам потребовалось четыре уникальных элемента.Но это на четыре элемента больше, чем семантически соответствует нашему документу. В идеале мы использовали бы ноль. Вы бы не знали, есть два элемента, которые уже равны размеру окна браузера: и . Используя псевдоэлементы: before и: after, мы получаем четыре!

Мы бы использовали те же свойства и значения, что и выше, только мы бы использовали:

  html: before, html: after, body: before, body: after {
    содержание: "";
    положение: фиксированное;
    фон: # a5ebff;

    /* так далее.* /
}

У Гарри Робертса тоже была эта идея, и он опубликовал ее на CSS Wizardy.

Хотя браузерная поддержка псевдоэлементов довольно хороша, она не так хороша, как метод №1. Более серьезная проблема заключается в том, что существует ошибка WebKit, из-за которой фон псевдоэлемента html-элемента растекается по всей области просмотра. Это делает использование псевдоэлементов в html-элементе пока недопустимым.

Но выход есть! Пока говорят смысловые!

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

  тело: до, тело: после {
    содержание: "";
    положение: фиксированное;
    фон: # 900;
    слева: 0;
    справа: 0;
    высота: 10 пикселей;
}
body: before {
    верх: 0;
}
body: after {
    внизу: 0;
}
тело {
    граница слева: твердое тело 10px # 900;
    граница справа: твердое тело 10px # 900;
}

Тот же точный эффект, немного меньше поддержки браузером, более семантический.

Посмотреть демо

For Funzies: Kottke.org body border

Сайт Kottke.org Джейсона Коттке имеет довольно крутой эффект границы тела.

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

Мы будем использовать box-shadow для элемента , и это отличная возможность разделять запятыми несколько теней.Вот он целиком с

 кузов  {
отступ: 40 пикселей;
переполнение-x: скрыто; / * Для Opera * /
-webkit-box-shadow:
вставка # 19d4ff 0 0 0 5px,
вставка # 18cdf7 0 0 0 1px,
вставка # 53dfff 0 0 0 10px,
вставка # 50d8f7 0 0 0 11px,
вставка # 8ce9ff 0 0 0 16px,
вставка # 88e2f7 0 0 0 17px,
вставка # c5f4ff 0 0 0 22px,
inset # bfecf7 0 0 0 23px;
-moz-box-shadow:
вставка # 19d4ff 0 0 0 5px,
вставка # 18cdf7 0 0 0 1px,
вставка # 53dfff 0 0 0 10px,
вставка # 50d8f7 0 0 0 11px,
вставка # 8ce9ff 0 0 0 16px,
вставка # 88e2f7 0 0 0 17px,
вставка # c5f4ff 0 0 0 22px,
вставка # bfecf7 0 0 0 23px;
тень коробки:
вставка # 19d4ff 0 0 0 5px,
вставка # 18cdf7 0 0 0 1px,
вставка # 53dfff 0 0 0 10px,
вставка # 50d8f7 0 0 0 11px,
вставка # 8ce9ff 0 0 0 16px,
вставка # 88e2f7 0 0 0 17px,
вставка # c5f4ff 0 0 0 22px,
вставка # bfecf7 0 0 0 23px;
}

Примечание об ошибке: Opera (Mac, 11.10) имеет странную ошибку, когда он увеличивает размер элемента, чтобы учесть тени снаружи (даже если тени вставлены). Это вызывает нежелательные полосы прокрутки, поскольку мы используем его для полноразмерного основного элемента. Горизонтальные полосы прокрутки можно скрыть, скрыв overflow-x. Но, к сожалению, внизу экрана все равно останется немного места.

Хотя у него наименьшая поддержка браузером из всех охваченных материалов, это неплохо: IE 9+, Fx 3.5+, Opera 10.5+, Chrome any, Safari 3+

Посмотреть демо

Как создавать и стилизовать границы с помощью CSS

Из этого туториала Вы узнаете, как определить границу вокруг элемента с помощью CSS.

Свойства границы CSS

Свойства границы CSS позволяют определить область границы блока элемента.

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

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

Знакомство с различными стилями границ

Свойство border-style устанавливает стиль границы прямоугольника, например: сплошной , пунктирный и т. Д.Это сокращенное свойство для установки стиля линии для всех четырех сторон границы элемента.

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

Значения нет и скрыто не отображает границы, однако между этими двумя значениями есть небольшая разница. В случае сворачивания ячейки таблицы и границы значение none имеет самый низкий приоритет , тогда как значение hidden имеет наивысший приоритет , если установлена ​​какая-либо другая конфликтующая граница.

Значения inset , outset , groove и edge создают трехмерный эффект, который по существу зависит от значения border-color .Обычно это достигается путем создания «тени» из двух цветов, которые немного светлее и темнее цвета границы. Давайте посмотрим на пример:

  h2 {
    стиль границы: пунктирная;
}
п {
    бордюрный стиль: гребень;
}

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

Установка ширины границы

Свойство border-width определяет ширину области границы. Это сокращенное свойство для одновременной установки толщины всех четырех сторон границы элемента.

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

  п {
    стиль границы: пунктирная;
    ширина границы: 10 пикселей;
}

Совет: Ширину границы можно указать с помощью любого значения длины, например px, em, rem и т. Д.В дополнение к единицам длины, ширина границы также может быть указана с помощью одного из трех ключевых слов: тонких , средних и толстых . Значения процентов не допускаются.

Указание цвета границы

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

Следующие правила стиля добавляют вокруг абзацев сплошную рамку красного цвета.

  п {
    стиль границы: сплошной;
    цвет границы: # ff0000;
}

Примечание: Свойство CSS border-width или border-color не работает, если оно используется отдельно.Используйте свойство border-style , чтобы сначала задать стиль границы.

Свойство «Граница» в сокращении

Свойство border CSS — это сокращенное свойство для установки одного или нескольких индивидуальных свойств границы border-width , border-style и border-color в одном правиле.

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

  п {
    граница: 5px solid # 00ff00;
}

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

Например, если значение свойства border-color отсутствует или не указано при установке границы, свойство color элемента будет использоваться в качестве значения для цвета границы.

В приведенном ниже примере границей будет сплошная красная линия шириной 5 пикселей:

  п {
    красный цвет;
    граница: сплошная 5 пикселей;
}

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

  п {
    граница: 5px # 00ff00;
}

Создавайте потрясающие причудливые границы с помощью border-image | Автор: Julián Ricardo Mahecha D’Maria

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

Позвольте представить вам border-image

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

Вместе с командой разработчиков у нас появилось несколько идей, как выполнить этот запрос.Мы начинаем думать о том, чтобы иметь полный кадр как фоновое изображение . Мы также рассматриваем разделение кадра, имеющее вертикальную границу и горизонтальную границу, которую мы можем разместить как background-image в 4 разных div и поиграться с его позиционированием. Также мы рассматриваем возможность разделения изображения по диагонали и при необходимости добавляем псевдоэлементы.

Мы экспериментируем с этими идеями, и большинство из них нельзя было масштабировать или использовать повторно простым и элегантным способом.

Итак, после небольшого исследования мы нашли свойство border-image .

border-image позволяет нам использовать изображение в качестве границы элемента, и мы все еще можем использовать другой актив как background-image элемента. Как это круто !!!

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

Свойство CSS border-image рисует изображение вокруг заданного элемента. Он заменяет обычную границу элемента.Определение из веб-документации MDN.

Его нотация аналогична background-image , нам нужно использовать url ('image.path') , или мы можем определить linear-gradient , что звучит потрясающе.

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

Чтобы изображение отображалось, вам нужно добавить к элементу шириной границы и стиля границы .И почему так? Если мы посмотрим на border-image , в нем сказано: заменяет обычную границу элемента. АГА!! Поэтому, если у нас нет границы, изображение не может ничего заменить и не будет отображаться.

Таким образом, вы можете установить border-image , border-width и border-style и все равно получить забавный результат, возможно, не тот, который вам нужен.

Нам нужно изучить больше свойств около border-image .Как обычно в CSS , border-image — это сокращение для дополнительных свойств.

Итак, чтобы ваше изображение border-image выглядело так, как вы намереваетесь, вам необходимо понять несколько этих свойств и использовать их соответственно. Вам нужен border-image-source , который определяет актив. border-image-slice для определения областей и формирования border-image и border-image-width для определения размера границы. border-image-ouset и border-image-repeat можно использовать, но не во всех случаях.

Если у вас проблемы с тем, чтобы изображение выглядело хорошо border-image , пожалуйста, взгляните на генератор изображений границ в веб-документации Mozilla. Там вы можете установить изображение и поиграть со значениями, чтобы увидеть, как оно выглядит.

Пример изображения рамки в трех блоках разного размера.

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

Несколько соображений при использовании border-image , как вы можете видеть в последнем примере code pen.Я использую объект, у которого есть пространство вокруг рамки. Это не сработает так, как вы ожидали, учитывая то, как создаются срезы. Также обратите внимание, что если вы используете рамку с декоративной средней рамкой, она, вероятно, тоже не сработает, потому что border-image повторяет часть изображения в средней области границы, одну по вертикали и одну по горизонтали. Поэтому, пожалуйста, поработайте со своей командой дизайнеров, чтобы создать активы, которые могут работать с border-image-slice и в то же время выглядеть потрясающе.

Если вы хотите использовать одну и ту же границу для элементов разного размера в одном и том же окне просмотра, попробуйте использовать SVG, они будут масштабироваться лучше, чем PNG.Пожалуйста, проверьте в разных браузерах и устройствах, потому что некоторые из них могут немного отличаться от вашего основного браузера разработки, поэтому вам может потребоваться настроить несколько значений здесь и там, в основном border-image-slice или border -image-width

Ресурсы

UX Collective жертвует 1 доллар США за каждую статью, опубликованную на нашей платформе. Эта история способствовала созданию сообщества Black Designers Bay Area: сообщества по профессиональному развитию для чернокожих, которые являются цифровыми дизайнерами и исследователями в районе залива Сан-Франциско.Объединившись в сообщество, участники делятся вдохновением, связями, наставничеством, профессиональным развитием, ресурсами, отзывами, поддержкой и стойкостью. Молчание против системного расизма — не вариант. Создайте сообщество дизайнеров, в которое вы верите.

Как добавить границу к изображению в CSS

  1. Фрагменты
  2. ›
  3. CSS
  4. ›
  5. Как добавить границу к изображению в CSS

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

Элемент имеет атрибут границы, который не используется в HTML5. Поэтому мы рекомендуем вместо этого использовать свойство CSS border.

Создать HTML¶

  • В разделе создайте элемент и поместите ссылку на изображение, которое следует использовать.
  • Задайте имя изображения с помощью атрибута alt, который дает информацию об изображении, если пользователь по какой-то причине не может его просмотреть.
  Nature

Добавьте CSS¶

  • Добавьте стиль в свой .
  • Определите ширину изображения.
  • Определите ширину, стиль и цвет границы с помощью свойства границы.
  img {
  ширина: 270 пикселей;
  граница: сплошной черный 1px;
}

Пример добавления границы к изображению: ¶ 

  

  
     Название документа 
    <стиль>
      img {
        ширина: 270 пикселей;
        граница: сплошной черный 1px;
      }
    
  
  
     Природа
Попробуйте сами »

Результат

Как добавить стиль к изображению границы¶

Чтобы изменить цвет границы, вы можете добавить свойство цвета CSS. Если вы хотите создать двойную границу, вам нужно добавить свойство padding к стилю вашего изображения.

Пример добавления двойной границы к изображению: ¶ 

  

  
     Название документа 
    <стиль>
      img {
        ширина: 650 пикселей;
        отступ: 1 пиксель;
        граница: 1px solid # 021a40;
      }
    
  
  
     
 Пример двойной границы 
 
     Природа
Попробуйте сами »

Также возможно иметь двойную рамку с разным внутренним цветом. Для этого добавьте свойство background-color.

Пример стилизации двойной границы изображения: ¶ 

  

  
     Название документа 
    <стиль>
      img {
        ширина: 650 пикселей;
        отступ: 5 пикселей;
        граница: 8px solid # 999999;
        цвет фона: # e6e6e6;
      }
    
  
  
     Природа
Попробуйте сами »

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

Пример кадрирования изображения с цветным фоном: ¶ 

  

  
     Название документа 
    <стиль>
      .природа {
        фон: # b0afac;
        отступ: 12 пикселей;
        граница: 1px solid # 999;
      }
    
  
  
     Природа
Попробуйте сами »

Также можно вставить изображение в рамку с подписью.

Пример добавления подписи: ¶ 

  

  
     Название документа 
    <стиль>
      .img-frame-cap {
        ширина: 200 пикселей;
        фон: #fff;
        отступ: 18px 18px 2px 18px;
        граница: 1px solid # 999;
      }
      .подпись {
        выравнивание текста: центр;
        маржа сверху: 4 пикселя;
        размер шрифта: 12 пикселей;
      }
    
  
  
    

      Природа
      
 Природа
Попробуйте сами »

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

Пример задания границ отдельно: ¶ 

  

  
     Название документа 
    <стиль>
      img {
        ширина: 225 пикселей;
        граница: сплошная 8px #ccc;
        нижняя граница: 130 пикселей сплошной #ccc;
      }
    
  
  
     Природа
Попробуйте сами »

Чтобы добавить стиль границы изображения, добавьте свойство стиля границы к элементу Природа Попробуйте сами »

Как указать каждый угол и создать границы круга¶

Чтобы указать каждый угол границы, вам необходимо использовать свойство CSS border-radius. Свойство border-radius может иметь от одного до четырех значений. Давайте посмотрим на пример с четырьмя значениями.

Помните, что первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому краю, третье значение относится к нижнему правому углу, а четвертое значение применяется к нижнему левому углу.

Пример указания каждого угла границы изображения: ¶ 

  

  
     Название документа 
    <стиль>
      img {
        ширина: 650 пикселей;
        отступ: 2 пикселя;
        граница: 3px solid # 1c87c9;
        радиус границы: 15 пикселей 50 пикселей 800 пикселей 5 пикселей;
      }
    
  
  
     Природа
Попробуйте сами »

Вместо того, чтобы пытаться вложить изображение в другой элемент или редактировать каждое изображение в Photoshop для достижения правильного вида границы изображения, вам необходимо установить значение свойства border-radius на "50%" или "999em". Установите одинаковые значения ширины и высоты.

Пример добавления окружности к изображению: ¶ 

  

  
     Название документа 
    <стиль>
      div.imageborder {
        радиус границы: 999em;
        ширина: 350 пикселей;
        высота: 350 пикселей;
        отступ: 5 пикселей;
        высота строки: 0;
        граница: 10px solid # 000;
        цвет фона: #eee;
      }
      img {
        радиус границы: 999em;
        высота: 100%;
        ширина: 100%;
        маржа: 0;
      }
    
  
  
     
 Пример границы круга 
 
    

       исландия
Попробуйте сами »

Как добавить падающую тень под границу изображения¶

Чтобы добавить падающую тень, нам нужно использовать свойство box-shadow. Кроме того, установите для свойства отображения значение «блокировать».

Пример добавления тени: ¶ 

  

  
     Название документа 
    <стиль>
      .природа {
        дисплей: блок;
        фон: прозрачный;
        отступ: 8 пикселей;
        граница: 1px solid #ccc;
        box-shadow: 10px 10px 10px # 999;
      }
    
  
  
    Природа
Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

The CSS Borders Tutorial

Всего за несколько недель до открытия 2021 JavaScript Full-Stack Bootcamp .
Записывайтесь в лист ожидания!

Граница - это тонкий слой между заполнением и полем. Редактируя границу, вы можете заставить элементы рисовать свой периметр на экране.

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

  • с бордюром
  • цвет рамки
  • ширина рамки

Свойство border можно использовать как сокращение для всех этих свойств.

border-radius используется для создания закругленных углов.

У вас также есть возможность использовать изображения в качестве границ, возможность, которую дает вам border-image и его особые отдельные свойства:

  • источник изображения границы
  • граница-изображение-фрагмент
  • ширина-границы-изображения
  • граница-изображение-исход
  • Повтор изображения границы

Начнем с стиля границы .

Стиль границы

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

  • пунктирная
  • штриховая
  • цельный
  • двойной
  • паз
  • гребень
  • вставка
  • исход
  • нет
  • скрыто

Проверьте этот Codepen на живом примере

По умолчанию для стиля используется none , поэтому, чтобы граница вообще отображалась, вам нужно изменить ее на что-то другое. solid в большинстве случаев является хорошим выбором.

Вы можете установить разные стили для каждой кромки, используя свойства

  • с бордюром
  • с окантовкой справа
  • с окантовкой снизу
  • граница слева

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

  п {
  стиль границы: сплошной пунктирный сплошной пунктирный;
}

Ширина бордюра

border-width используется для установки ширины границы.

Вы можете использовать одно из предопределенных значений:

  • тонкий
  • средний (значение по умолчанию)
  • толщиной

или выразить значение в пикселях, em или rem или любое другое допустимое значение длины.

Пример:

Вы можете установить ширину каждого края (верхний правый нижний левый) отдельно, используя 4 значения:

  п {
  ширина границы: 2px 1px 2px 1px;
}

или вы можете использовать определенные свойства края border-top-width , border-right-width , border-bottom-width , border-left-width .

Цвет границы

border-color используется для установки цвета границы.

Если цвет не задан, рамка по умолчанию окрашивается в цвет текста в элементе.

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

Пример:

  п {
  цвет границы: желтый;
}

Вы можете установить цвет каждого края (верхний правый нижний левый) отдельно, используя 4 значения:

  п {
  цвет границы: черный красный желтый синий;
}

или вы можете использовать определенные свойства края border-top-color , border-right-color , border-bottom-color , border-left-color .

Граница стенографического свойства

Эти 3 упомянутых свойства, border-width , border-style и border-color могут быть установлены с использованием сокращенного свойства border .

Пример:

  п {
  граница: сплошной черный 2px;
}

Вы также можете использовать свойства края border-top , border-right , border-bottom , border-left .

Пример:

  п {
  border-left: сплошной черный цвет 2px;
  border-right: красный пунктир 3px;
}

Радиус границы

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

использование:

  п {
  радиус границы: 3 пикселя;
}

Вы также можете использовать свойства края border-top-left-radius , border-top-right-radius , border-bottom-left-radius , border-bottom-right-radius .

Использование изображений в качестве границ

Одна очень крутая вещь с рамками - это возможность использовать изображения для их стилизации.Это позволяет вам очень творчески подходить к бордюрам.

У нас 5 объектов:

  • источник изображения границы
  • граница-изображение-фрагмент
  • ширина-границы-изображения
  • граница-изображение-исход
  • Повтор изображения границы

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


Учебный курс 2021 JavaScript Full-Stack Bootcamp начнется в конце марта 2021 года. Не упустите эту возможность, подпишитесь на лист ожидания!

Больше руководств по css:


Граница CSS с примерами учебник

Введение в границу CSS

Привет, ребята, сегодня поговорим о… ГРАНИЦАХ!

Граница CSS - это то, что вы, скорее всего, будете использовать почти каждый день, если вы, конечно, фронтенд-разработчик.

Я нашел несколько полезных (некоторые больше, некоторые меньше, некоторые просто забавные) советов и приемов, которые вы можете использовать в своем проекте.

Давайте начнем!

Если вы предпочитаете видео, вот версия для YouTube.

1. Анимированная граница CSS

Что делать, если мы хотим сделать наш предмет более заметным?

Давайте оживим!

Мы можем анимировать наши границы, даже не меняя размер элемента, и это очень просто.

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

Давайте посмотрим на пример.

2. CSS Границы изображений

Вы когда-нибудь представляли себе пончики вокруг своей стихии?

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

Для этого вам нужно использовать атрибут border-image в коде CSS вашего элемента.

Давайте посмотрим на пример.

3. Граница CSS в стиле змеи

Что делать, если нам нужна двухцветная ультра видимая рамка?

Мы можем носить змеиную униформу и раскрашивать ее по своему желанию.

Давайте попробуем код из примера.

4. Граница CSS в стиле лестницы

Вы когда-нибудь пробовали добавить границу в стиле 3D вокруг своего div?

Добавить многоцветную глубину в наш элемент очень просто. Нам просто нужно несколько теней в CSS.

Давайте проверим наш пример!

5. Только тень CSS-границы

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

Уже нет!

Теперь мы можем использовать box-shadow вокруг нашего элемента в качестве границы, взгляните на код.

6. CSS-граница с тенью и контуром

Мы можем добиться эффекта, похожего на змеиный стиль, несколькими способами.

Затем один из них - это смешивание параметров box-shadow и контура в CSS нашего элемента.

Давайте взглянем.

7. Несколько теней и очертания

Мы даже можем создать несколько цветов и элементов в нашей рамке.

Для этого нам нужно смешать тени и контур, как в примере ниже.

Давайте немного поэкспериментируем с этим.

Codepen:

8. Двойная граница CSS с box-shadow

Мы также можем смешать просто границу с некоторой тенью и контуром.

Это создаст прекрасный эффект линии с шипами, как в примере ниже.

Давайте проверим код!

9. Многоцветная рамка CSS

А что, если бы мы хотели раскрасить наши границы немного больше, чем в предыдущих примерах?

Мы даже можем оформить каждую стену элемента разным цветом.

Для этого нам понадобится настраиваемый фон с градиентом внутри.

Взгляните на пример ниже.

Заключение

Хорошо, на данный момент это была последняя из идей.

Надеюсь, они вам нравятся, и эти немногие будут вам полезны.

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

Поздравляем, теперь вы эксперт по границам!

Спасибо за чтение,

Радек из Дуомлы

Сопутствующие показания 📖

Учебное пособие по созданию таблицы HTML

Как создать информационную панель с помощью Bootstrap, учебник

Учебное пособие по соединению с примерами SQL

Радек Фабисиак

Радек Фабисиак был с компьютерами с первых дней своего существования, помнит оранжевый экран с Win32, большие дискеты и звук коммутируемого соединения с Интернетом.У него есть опыт разработки полного цикла, работая в ведущих ИТ-компаниях, таких как Microsoft. В последние годы в основной команде Duomly, где в дополнение к ИТ получил навыки, связанные с интернет-маркетингом, поисковой оптимизацией, созданием контента или построением онлайн-бизнеса, теперь эти знания передаются аудитории Duomly.

No related posts.