border | CSS

• Параграф «CSS рамка»:
• border
  1. Генератор border
  2. Прозрачный border
  3. Внутренний border
  4. Пунктирная обводка внутри HTML блока
  5. Толщина границы в процентах
  6. Вдавленная линия CSS
• border-radius
• border-image
• outline
• box-shadow
• Поля и отступы CSS
• Фон CSS

Генератор border CSS

Cвойство border (w3.org) позволяет установить толщину, стиль и цвет границы элемента.

none hidden solid dotted dashed double groove ridge inset outset
none hidden solid dotted dashed double groove ridge inset outset	стиль	none hidden solid dotted dashed double groove ridge inset outset
none hidden solid dotted dashed double groove ridge inset outset

	цвет

	толщина

div {
  border: 3px none rgb(34, 34, 34);

/* или */ 

  border-top: 3px none rgb(34, 34, 34);
  border-right: 3px none rgb(34, 34, 34);
  border-bottom: 3px none rgb(34, 34, 34);
  border-left: 3px none rgb(34, 34, 34);

/* или */ 

  border-style: none;  /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ 
  border-color: rgb(34, 34, 34);  /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ 
  border-width: 3px;  /* одновременно для четырёх границ элемента(верхняя и нижняя граница) (левая и правая граница)(верхняя граница) (левая и правая граница) (нижняя граница)(верхняя граница) (правая граница) (нижняя граница) (левая граница) */ 

/* или */ 

  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;

  border-top-color: rgb(34, 34, 34);
  border-right-color: rgb(34, 34, 34);
  border-bottom-color: rgb(34, 34, 34);
  border-left-color: rgb(34, 34, 34);

  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
}

Прозрачный border CSS

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

<div class="itog1"></div>

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

<div class="itog2"></div>

Чтобы у изображения были полупрозрачные края, сквозь которые просвечивала эта же картинка, а не фон родителя, лучше применить outline.

<img alt="голубой фон в смайликах" src="http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg" height="120" width="120" class="izoitog">

Внутренний border. Управление длиной блока

Если задано width: auto;, то ширина элемента равна ширине родителя. Она не увеличивается за счёт margin, border и padding.

width: auto; (по умолчанию)

width: 100%;

В остальных случаях border, как и padding, расширяет коробку элемента. То есть если неправильно рассчитать width, то блок переместится вниз, не поместившись в ограниченное пространство, меню будет некрасиво удлиняться и т.п..

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = ширина коробки элемента

Дабы сделать так, чтобы рамка не увеличивала блок, нужно указать box-sizing: border-box;. Тогда border и padding не будут влиять на ширину контейнера элемента.

border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;

width: 240px;

width: 120px;

width: 120px;

Пунктирная обводка внутри HTML блока

Задача: пройти пунктиром по периметру на некотором расстоянии от краёв элемента. Эффект будет такой, как будто на швейной машинке прошили полотно и остались на ткани стежки. Если у кнопки углы закругленны, фон задан градиентом или картинкой, текст должен выделяться мышкой и нужно обойтись одним тегом, то единственно верным решением будет воспользоваться :after:

какой-то текст

<div id="itog5">какой-то текст</div>

Рамка в процентах

Ширина рамки border-width может устанавливаться в любых единицах измерения, но не в процентах, также как и box-shadow, и outline. Для однотонных линий можно использовать background. Из-за того, что не хочется лишаться padding, нужен ещё и :after:

резиновый border

<div id="itog6">какой-то текст</div>

Вдавленная линия CSS

Эффект вдавленной линии достигается когда верхняя полоса темнее, нижняя — светлее; выпуклой наоборот.

---

<hr id="itog7">