Css рамка внутри блока: Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании — Хабр Q&A

02.06.2023 alexxlab

Содержание

Рамка блока в CSS

Главная > Учебник CSS >

Создание рамки блока

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

ширину рамки
стиль рамки
цвет

Для указания ширины рамки используется свойство border-width. Оно может принимать следующие значения:

border-width: medium — средняя (по умолчанию)

border-width: thin — тонкая

border-width: thick — толстая

border-width: ширина в единицах измерения CSS

border-width: inherit — значение принимается от родительского элемента

Чаще всего ширину указывают в каких-либо единицах измерения, существующих в CSS.

Стиль рамки устанавливается с помощью свойства border-style. В зависимости от этого свойства рамки выгдядят по-разному.

Далее приведены значения этого свойства и стили, которые они устанавливают.

solid

dotted

dashed

double

inset

outset

groove

ridge

При маленькой ширине рамка может выглядеть по-другому.

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

border-style: none — отсутствие рамки

border-style: hidden — то же, что и none, применяется к ячейке таблицы

border-style: inherit — значение принимается от родительского элемента

Цвет рамки устанавливает свойство border-color. В значении указывается цвет одним из способов, существующих в CSS.

Создадим блок и зададим ему рамку.

Стиль:

7
8
9
10
11
12

#div1
  {
  border-width: 1px;
  border-style: solid;
  border-color: Red;
  }

HTML код:

16	<div>Блок с рамкой</div>

Попробуйте задать блоку рамку с другими значениями свойств.

Сокращённая запись

Рамку можно создать более коротким способом. Для этого существует свойство border, в котором через пробел перечисляются свойства в таком порядке:

ширина
стиль
цвет

Cоздадим блок с такой же рамкой, но установим её с помощью сокращённой записи.

17	<div>Блок с рамкой</div>

Если не указать ширину или цвет, то будет использовано значение по умолчанию.

Отдельные стороны рамки

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

Для создания рамки с каждой из сторон соществуют свойства border-left, border-right, border-top, border-bottom. Для примера создадим блок, у которого есть рамка только слева.

18	<div>Блок<br>с рамкой<br>слева</div>

Создайте рамку у этого блока с других сторон с разным видом.

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

border-left-width, border-left-style, border-left-color

border-right-width, border-right-style, border-right-color

border-top-width, border-top-style, border-top-color

border-bottom-width, border-bottom-style, border-bottom-color

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

Для примера создадим блок, у которого рамка имеет со всех сторон разную ширину.

Стиль:

13
14
15
16
17
18

#div2
  {
  border-width: 5px 2px 3px 7px;
  border-style: solid;
  border-color: #D118CB;
  }

HTML код:

25	<div>Блок с рамкой с разной шириной</div>

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

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

border — CSS | MDN

Свойство CSS border это универсальное свойство для указания всех персональных свойств границ за раз: border-width, border-style (en-US), и border-color (en-US).

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание,

border не может быть использован для указания пользовательского значения border-image (en-US), но вместо этого устанавливает его в начальное значение, т.е. none.

border: 1px;
border: 2px dotted;
border: medium dashed green;

Примечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width, border-style (en-US), и border-color

(en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

Свойство border указывается используя одно или более значений <br-width>, <br-style>, и <color> указанных ниже.

Значения

<br-width>

Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width.

<br-style>

Стиль линии границ. По умолчанию

none если отсутствует. Больше информации border-style (en-US).

<color>

Цвет границ. По умолчанию принимает значение свойства элементов color (en-US). Больше информации border-color (en-US).

Обычный синтаксис

border = 
<line-width>  || (en-US)
<line-style>  || (en-US)
<color>       "><line-width> = 
<length [0,∞]>  | (en-US)
thin            | (en-US)
medium          | (en-US)
thick           
"><line-style> = 
none    | (en-US)
hidden  | (en-US)
dotted  | (en-US)
dashed  | (en-US)
solid   | (en-US)
double  | (en-US)
groove  | (en-US)
ridge   | (en-US)
inset   | (en-US)
outset

HTML

<div>Look at my borders. </div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;
  }
</style>

CSS

style {
  display: block;
  border: 1px dashed black;
}

Результат

Specification
CSS Backgrounds and Borders Module Level 3 # propdef-border

Начальное значение	как и у каждого из подсвойств этого свойства: `border-width`: как и у каждого из подсвойств этого свойства: `border-top-width` (en-US): `medium` `border-right-width` (en-US) : `medium` `border-bottom-width` (en-US): `medium` `border-left-width` (en-US): `medium` `border-style` (en-US): как и у каждого из подсвойств этого свойства: `border-top-style` (en-US): `none` `border-right-style` (en-US): `none` `border-bottom-style` (en-US): `none` `border-left-style` (en-US): `none` `border-color` (en-US): как и у каждого из подсвойств этого свойства: `border-top-color` (en-US): `currentcolor` `border-right-color` (en-US): `currentcolor` `border-bottom-color` (en-US): `currentcolor` `border-left-color` (en-US): `currentcolor`
Применяется к	все элементы. Это также применяется к `::first-letter` .
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `border-width`: как и у каждого из подсвойств этого свойства: `border-bottom-width` (en-US): абсолютная длина или `0`, если `border-bottom-style` (en-US) — `none` или `hidden` `border-left-width` (en-US): абсолютная длина или `0`, если `border-left-style` (en-US) — `none` или `hidden` `border-right-width` (en-US): абсолютная длина или `0`, если `border-right-style` (en-US) — `none` или `hidden` `border-top-width` (en-US): абсолютная длина или `0`, если `border-top-style` (en-US) — `none` или `hidden` `border-style` (en-US): как и у каждого из подсвойств этого свойства: `border-bottom-style` (en-US): как указано `border-left-style` (en-US): как указано `border-right-style` (en-US): как указано `border-top-style` (en-US): как указано `border-color` (en-US): как и у каждого из подсвойств этого свойства: `border-bottom-color` (en-US): вычисленный цвет `border-left-color` (en-US): вычисленный цвет `border-right-color` (en-US): вычисленный цвет `border-top-color` (en-US): вычисленный цвет
Animation type	как и у каждого из подсвойств этого свойства: `border-color` (en-US): как и у каждого из подсвойств этого свойства: `border-bottom-color` (en-US): цвет `border-left-color` (en-US): цвет `border-right-color` (en-US): цвет `border-top-color` (en-US): цвет `border-style` (en-US): discrete `border-width`: как и у каждого из подсвойств этого свойства: `border-bottom-width` (en-US): длина `border-left-width` (en-US): длина `border-right-width` (en-US): длина `border-top-width` (en-US): длина

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

border-radius-related CSS properties: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 11 февр. 2023 г. by MDN contributors.

html — можно ли разместить границу внутри заполнения, используя только один div?

Задавать вопрос

спросил 8 лет, 3 месяца назад

Изменено 1 год, 10 месяцев назад

Просмотрено 26 тысяч раз

Мне просто интересно, знает ли кто-нибудь способ использовать только один div, чтобы получить эффект встроенной границы? Или я должен использовать два? Вот что я имею в виду:

В настоящее время я использую блок div с рамкой, завернутый внутрь блока div с отступами. Я должен мысленно отслеживать, какие in_wraps сочетаются с какими out_wraps. Я хотел бы просто иметь элемент на странице, который будет выглядеть так:

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

 .out_wrap_blk{
    отступ: 5px;
    фон: черный;
    плыть налево;
    поле: 10 пикселей;
}
.out_wrap_gry{
    отступ: 5px;
    фон: #323232;
    плыть налево;
    поле: 10 пикселей;
}
.in_wrap_grn{
    граница: 1px сплошная #0CFF0E;
    отступ: 20 пикселей;
}
.in_wrap_blk{
    граница: 1px сплошной черный;
    отступ: 20 пикселей;
}

Можно ли сократить это до одного элемента или мне нужно придерживаться внешнего элемента, обернутого вокруг внутреннего элемента?

html
css
граница

Попробуйте это:

 #bor-outline {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: серый;
  граница: 4px сплошная #292929;
  контур: 4px сплошной #e3e3e3;
}

 <дел>
  привет

Все, что вам нужно, это великолепие CSS layout-offset свойство:

Вот пример JSFiddle .

CSS:

 раздел {
    фон: #808080;
    поле: 20 пикселей;
    ширина: 200 пикселей;
    отступ: 20 пикселей;
    высота: 200 пикселей;
    контур: 2px сплошной черный;
    смещение контура: -16px;
}

Вы можете использовать псевдоэлемент:

HTML:

CSS:

 #w{ширина:300px;высота:300px; фон: серый; положение: относительное; }
#ж:после{
    содержание:"";
    положение: абсолютное;
    слева: 15 пикселей;
    верх: 15 пикселей;
    высота: 266 пикселей;
    ширина: 266 пикселей;
    граница: 2px сплошной черный;
}

Дж. С. Фиддл

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS Внутренняя граница | Принцип работы внутренней границы с примерами

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

Прямоугольная форма внутренней границы:

Прямоугольная форма радиуса внутренней границы:

Из двух приведенных выше изображений видно, что внутренняя граница может иметь любую форму.

Принцип работы внутренней границы

Внутренняя граница работает со свойствами, называемыми контуром и смещением контура. Свойство Outline описывает размер границы элемента, тип границы и цвет границы соответственно.

Синтаксис:

 дел {
контур: 10px сплошной зеленый;
}

Outline-offset описывает расстояние или пространство между границей и элементом контура.

Синтаксис:

 раздел{
смещение контура: 10 пикселей;
}

Примеры синтаксиса внутренней границы CSS

Ниже приведены примеры внутренней границы CSS:

Контурная граница имеет несколько типов

Сплошная: Граница получается сплошной, как жирный текст.
Пунктир: Обозначает границы пунктирными линиями.
Пунктир: Обозначает границы пунктирными линиями.
Двойной: Делает границу двойной сплошной.
Канавка: Дает внешние изогнутые края в качестве границы.
Гребень: Дает внутренние изогнутые края в качестве границы (противоположная функциональность канавки).

Пример №1. Контур и смещение со сплошной рамкой.

Синтаксис:

 дел {
контур: 10px сплошной зеленый;
смещение контура: 10 пикселей;
}

Код:

 

<голова>
SolidOutline

<стиль>
.твердый {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6 пикселей сплошного синего цвета;
цвет фона: оранжевый;
контур: 10px сплошной зеленый;
смещение контура: 5px ;
}

<тело>
<дел>
Привет, я офсетная модель с пунктирным контуром.  CSS Сделай меня таким.

Вывод:

Пример 2. Контур и смещение пунктирной границы

Синтаксис:

 div{
контур: 10 пикселей с синими точками;
смещение контура: 15 пикселей;
}

Код:

 

<голова>
Точечный контур

<стиль>
.пунктирный {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6 пикселей сплошного желтого цвета;
цвет фона: коричневый;
контур: 10 пикселей с фиолетовыми точками;
смещение контура: 15px ;
}

<тело>
<дел>
Привет, я офсетная модель с точечным контуром. CSS Сделай меня таким.

Вывод:

Пример №3. Контур и смещение с пунктирной рамкой

Синтаксис:

 div{
контур: 10 пикселей, пунктирный синий;
смещение контура: 12px;
}

Код:

 

<голова>
Штриховой контур

<стиль>
. пунктирная {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6px сплошной коричневый;
цвет фона: серебро;
контур: 10px пунктирный красный;
смещение контура: 15px ;
}

<тело>
Привет, у меня офсетная модель с пунктирным контуром. CSS Сделай меня таким.

Вывод:

Пример 4. Контур и смещение с двойной рамкой

Синтаксис:

 div{
контур: 10px двойной коричневый;
смещение контура: 13px;
}

Код:

 

<голова>
Двойной контур

<стиль>
.двойной {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6 пикселей сплошного оранжевого цвета;
цвет фона: желтый;
контур: 10px двойной темно-бордовый;
смещение контура: 15px ;
}

<тело>
Привет, я офсетная модель с двойным контуром.  CSS Сделай меня таким.

Вывод:

Пример 5. Контур и смещение с помощью Groove Border

Синтаксис:

 div{
контур: 10 пикселей, канавка желтая;
смещение контура: 14px;
}

Код:

 

<голова>
Контур канавки

<стиль>
.канавка {
ширина: 400 пикселей;
длина: 100 пикселей;
поля: 40px 40px 40px 180px;
размер шрифта: 20 пикселей;
семейство шрифтов: без засечек;
граница: 6 пикселей, сплошной черный цвет;
цвет фона: серый;
контур: 20px бирюзовый;
смещение контура: 17px ;
}

<тело>
Привет, я модель Groove для офсетной печати. CSS Сделай меня таким.

Вывод:

Пример № 6. Контур и смещение с границей хребта

Синтаксис:

 div{
контур: серебряный ребро 10 пикселей;
смещение контура: 10 пикселей;
}

Код:

  <голова>Контур хребта  <стиль> .

Css рамка внутри блока: Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании — Хабр Q&A

Рамка блока в CSS

Создание рамки блока

Сокращённая запись

Отдельные стороны рамки

border — CSS | MDN

Значения

Обычный синтаксис

HTML

CSS

Результат

Found a content problem with this page?

html — можно ли разместить границу внутри заполнения, используя только один div?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

CSS Внутренняя граница | Принцип работы внутренней границы с примерами

Принцип работы внутренней границы

Примеры синтаксиса внутренней границы CSS

Контурная граница имеет несколько типов

Пример №1. Контур и смещение со сплошной рамкой.

Пример 2. Контур и смещение пунктирной границы

Пример №3. Контур и смещение с пунктирной рамкой

Пример 4. Контур и смещение с двойной рамкой

Пример 5. Контур и смещение с помощью Groove Border

Пример № 6. Контур и смещение с границей хребта

Добавить комментарий Отменить ответ