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

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

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

Ссылка на основную публикацию