Рамки в css – Как написать на чистом css рамку с «вырезом» для текста? — Хабр Q&A

Leave a Comment / Css / By /

как сделать или убрать границу?

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

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

Количество значений

Результат

1

Одинаковая ширина рамок со всех сторон.

2

Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

3

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

4

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick

(6px).

border-width: 16px 12px 4px 8px;

border-style

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

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

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

<p>border-style: solid double dotted none</p>

border-color

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

border

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

p { border: 2px solid green; }

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

  • border-top — верхняя граница.
  • border-right — правая.
  • border-bottom — нижняя.
  • border-left — левая.
p { border-left: 6px dotted yellow; }

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

outline-color

Определяет цвет внешнего контура.

Пример кода ниже задаёт стиль заголовка первого уровня с зелёными внутренними границами и оранжевыми внешними контурами.

h2 { border: solid 3px green; outline-style: solid; outline-width: 6px; outline-color: orange; }

outline

Объединяющее три предыдущих свойство, аналог border.

Код:

<!DOCTYPE html>
<html>
<head>
    <title>outline</title>
    <style type="text/css">
    h2 {
	border: solid 3px green;
	outline: solid 6px orange;
    }
    </style>
</head>
<body>
<h2>Заголовок с внешним контуром</h2>
</body>
</html>

Результат:

Полезные ссылки:

Создание рамок в 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 делается рамка вокруг любого элемента. Так же с помощью рамки создается подчеркивание ссылок, когда нужен другой цвет подчеркивающей линии. Ну а на этом с рамками все, переходим к следующему важному уроку, где будем рассматривать свойства списков

.


Отступы и рамки в стилях CSS

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

Содержание статьи

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

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

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

рамки в css

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

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

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

  • 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-х отступов (начиная сверху и по часовой стрелке). Примеры:

margin:10px 20px 20px 30px;
margin:10px 20px 30px; - отступ слева справа одинаков
margin:10px 20px; - отступ сверху-снизу и слева-справа одинаков
margin:10px; - все отступы одинаковы

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

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

  • 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. Сборное правило.

как сделать границы вокруг элемента, примеры работы

Градиентные рамки в CSS

От автора: допустим, вам нужна градиентная рамка CSS вокруг элемента. Я представляю себе это так: для этого не существует простого очевидного CSS API; я просто создам элемент-оболочку с linear-gradient фоном, а затем внутренний элемент перекроет большую часть этого фона, за исключением тонкой линии вокруг него.

Возможно, так:

Если вам не нравится идея элемента-оболочки, вы можете использовать псевдо-элемент, если отрицательное значение z-индекса в порядке (этого не сработает, если у вас будет много вложений в родительский элементов с их собственным фоном). Вот пример Стивена Шоу, в котором рассматривается border-radius:

Градиентные рамки в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Градиентные рамки в CSS

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Рамки CSS

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:


<html>
	<head>
	<meta charset="utf-8"/>
	</head>
	<body>
		<div>
			<p>Рамки в CSS</p>
		</div>
	</body>
</html>

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):


<style>
	#tester {
		border-width:1px;
		border-style:solid;
		border-color:red;
	}
</style>

Свойство border-width отвечает за ширину рамки, свойство border-style отвечает за стиль рамки, border-color — за цвет рамки. С первым и третьим свойством всё понятно. Все значения, которые может принимать свойство border-style показаны на рисунке ниже:
Рамки в CSS
Если мы сейчас откроем нашу страницу в браузере, то увидим, что вокруг блока появилась сплошная рамка красного цвета шириной в 1px.

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


border:1px solid red;

Т.е. сначала указываем толщину рамки, затем указываем стиль рамки и цвет.

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


border-top: 2px solid red;
border-bottom: 3px dotted green;
border-left: 6px dashed yellow;
border-right: 5px double #fe54e5;

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

Рамки применяются абсолютно везде: практически сложно встретить дизайн сайта, на котором не использовались бы рамки. Очень часто пункты меню отделяются вертикальной линией, которая задаётся как раз свойством border-right, либо border-left. Также можно делать интересные эффекты у ссылок. Как раз на эту тему домашнее задание:

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

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

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Следующая статья >

Изучаем рамки на CSS