Закрыть ... [X]

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

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

Уроки // самоучитель CSS // рамки в CSS

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

Синтаксис свойства border прост: border: 1px solid black;. Это свойство имеет три значения:

  • 1px — толщина границы.
  • solid — тип рамки, solid — это сплошная линия, double — двойная сплошная, dashed — пунктиром. Есть ещё несколько типов рамок, информацию про них найдёте тут: CSS border.
  • black — устанавливает цвет границы. Цвета можно задавать по названию, допустимые значения находятся тут: таблица цветов CSS, или по шестнадцатеричному коду. Как это сделать напсано в статье: цвета в CSS.

Рамка текста CSS

Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:

.example-1 { width: 90%; padding: 10px; margin: 0 auto; border: 1px solid black; }

Этому абзацу присвоен класс example-1.

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

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).

.example-2 { width: 90%; margin: 0 auto; border: 3px solid red; }

Этому абзацу присвоен класс example-2.

Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.

Как сделать рамку картинки в CSS

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

.example-img { border: 4px solid green; }

Вот как сработает этот код:

Как закруглить углы рамки в CSS

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

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

.example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; }

Вот как он работает:

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

Если у блока нет рамки, то есть граница border-width: 0;, то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:

.example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; }

Вот как работает этот пример:

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

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

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

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

Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50%.

.example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; }

Вот как работает этот пример:

</>

На этом тема "рамки в CSS" раскрыта полностью. Успехов в изучении CSS!


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать рамку на сайте с помощью CSS. Блог разработчиков phpBB Как сделать на новый год коробку

Как в css сделать рамку CSS : Рамка вокруг текста DarkGhost Как текст сделать в рамке?
Как в css сделать рамку Css 3 - Как сделать такую рамку в CSS? - Stack Overflow на русском
Как в css сделать рамку CSS border, примеры. Как сделать рамку (границу) в html
Как в css сделать рамку Урок 4. Как сделать рамку на сайте с помощью CSS
Как в css сделать рамку CSS -рамки : как сделать или убрать границу?
Как в css сделать рамку Делаем прямоугольник с рамкой в CSS
Как в css сделать рамку Как сделать рамку картинки в CSS
Как в css сделать рамку Рамки и границы CSS по теме


ШОКИРУЮЩИЕ НОВОСТИ