Рамки в css

Атрибуты бирки

Следование важные атрибуты бирки <frame>:

Атрибут
Описание
src
Этот атрибут использован для того чтобы дать имя файла которое должно быть нагружено в рамке. Свое значение может быть любым URL. Например, src=» /html/top_frame.htm» нагрузит архив HTML доступный в директории HTML.
имя
Этот атрибут позволяет вам дать имя к рамке. Он использован для того чтобы показать которую рамку документ должен быть нагружен в

Это специально важно когда вы хотите создать соединения в одном кадре которые нагружают страницы в другую рамку, в случае которой второй рамке нужно имя определить как цель соединения.
frameborder
Этот атрибут определяет ли или не показаны границы той рамки; он отвергает значение уступанное атрибут frameborder на бирке если одно дается, и это может принять значения или 1 (да) или 0, то (нет).
marginwidth
Этот атрибут позволяет вам определить ширину пространства между левое и право границ рамки и содержания рамки. Значение уступано пикселы

Например marginwidth= » 10″.
marginheight
Этот атрибут позволяет вам определить высоту пространства между верхняя часть и дно своего содержания рамки границ и. Значение уступано пикселы. Например marginheight= » 10″.
noresize
значением по умолчанию вы можете изменить размеры любая рамка путем щелкать и волочить на границах рамки. Атрибут noresize предотвращает потребителя от мочь изменить размеры рамка. Например noresize= » noresize».
перечислять
Этот атрибут контролирует возникновение scrollbars которые появляются на рамку. Это не принимает значения или «да», «нет» или «автомобиль». Например scrolling= » нет» середины оно не должен иметь линейки прокрутки.
longdesc
Этот атрибут позволяет вам снабдить соединение другая страница содержа длиннее описание содержания рамки. Например longdesc= » framedescription.htm»

border-radius

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

На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:

See the Pen
border radius by Андрей (@adlibi)
on CodePen.

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

Так, для квадрата на примере ниже, задано такое свойство:

Значения устанавливаются для углов по часовой стрелке.

See the Pen
border radius 4 by Андрей (@adlibi)
on CodePen.

Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.

Интересно, что для каждого угла можно задать два параметра скругления через знак слэша. При этом первая величина – горизонтальный радиус, вторая – вертикальный. Показать это лучше на примере. Вот что получится, если для фигуры задать свойство:

See the Pen
border radius 2 by Андрей (@adlibi)
on CodePen.

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

See the Pen
border radius 50percent by Андрей (@adlibi)
on CodePen.

Второй способ

Второй способ заключается в использовании свойства CSS3 border-image. Свойство CSS3 border-image позволяет нам заполнить рамку изображением, а также градиентом CSS3. Большинство браузеров поддерживают border-image: Chrome, Internet Explorer 11, Firefox, Safari и Opera нормально выводят border-image.

Однако следует отметить, что border-image будет работать только для прямоугольных фигур или блоков. Это означает, что добавление border-radius будет отменять вывод border-image.

Ниже приведена спецификация свойства border-image:

border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;

<source> это путь, который задает изображение, используемое в рамке. При этом мы заполним его с помощью CSS3 Gradient. Для достижения такого же вида, что и в предыдущих примерах, мы применяем CSS3 Gradient в пределах border-image следующим образом:

.box{  
 width: 250px;  
    height: 250px;  
    background: #eee;  
    border: 20px solid transparent;  
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);  
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);  
    border-image: linear-gradient(to bottombottom, #3acfd5 0%, #3a4ed5 100%);  
    border-image-slice: 1;  
}

border-image не выведет ничего, если мы не зададим ширину рамки. Так что, как вы можете видеть выше, мы добавляем ширину рамки 20 пикселей с прозрачным цветом. Затем мы устанавливаем значение для border-image и linear-gradient вместе с вендорными префиксами для ранних версий Webkit и Firefox.

Добавление border-image-slice устанавливает внутреннее смещение содержимого image-border. Это свойство необходимо для отображения градиента полностью по всему блоку. Смотрите приведенный ниже пример:

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

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

Слева направо

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

Диагональный градиент

Результат

HTML:

<div class="box"></div>

CSS:

.box{
	  width: 250px;
	  height: 250px;
      margin: auto;
	  background: #eee;

	  border: 20px solid transparent;

	  -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
	  border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);

	  border-image-slice: 1;
	}

Свойство border-image-width

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

Это свойство принимает до четырех значений (смещение сверху, справа, снизу и слева), число или процентное значение.

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

box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19;
  border-image-width: 3;
}

… устанавливает ширину изображения рамки в три раза больше значения border-width, которое равно 19 пикселям. В результате получится что-то наподобие этого:

Я пришла к выводу, что определение для свойств border-image-width и border-image-slice одинаковых значений обеспечивает наилучшее отображение рисунка рамки без искажений.

Синтаксис CSS border

Где:

• border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
• border-style — стиль выводимой рамки. Может принимать следующие значения
  • none или hidden — отменяет границу
  • dotted — рамка из точек
  • dashed — рамка из тире
  • solid — простая линия (применяется чаще всего)
  • double — двойная рамка
  • groove — рифленая 3D граница
  • ridge, inset, outset — различные 3D эффекты рамки
  • inherit — применяется значение родительского элемента
• border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

Вот как это выглядит на странице:

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)

Вот как это выглядит на странице:

border-style

С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).

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

solid

сплошная линия

none

по умолчанию – линии нет

double

двойная линия

dashed

пунктир

dotted

набор точек

groove

придание линии вогнутости

ridge

придание линии выпуклости

inset

эффект вдавленности блока

outset

эффект выпуклости блока

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

See the Pen
border style by Андрей (@adlibi)
on CodePen.

Свойство border-image-slice

После того как вы выбрали изображение с помощью border-image-source, вы применяете его к рамке, используя свойство border-image-slice:

element {
  border-image-slice: 19;
}

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

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

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

Числа обозначают пиксели изображения, или координаты в случае, если это векторное изображение. Не добавляйте px после числа – в этом случае свойство не будет работать.

Вот как вы можете использовать border-image-slice:

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>
.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-bg.png);
  border-image-slice: 19; 
}

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

мы получим что-то выглядящее вот так:

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

Например, использовав изображение с непрозрачной центральной областью, вы получите такой же результат, как на рисунке выше.

Применив ключевое слово fill следующим образом:

.box {
  border: 19px dotted #c905c6;
  border-image-source: url(border-fill.png);
  border-image-slice: 19 fill;
}

с изображением, содержащим в центральной области детализированный контент:

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