border внутри блока css

Генератор border CSS

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

стиль
цвет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недавно необходимо было сделать внутреннюю границу для div’a. Решил использовать стандартное значение inset для свойства border, однако оно не сработало. Тогда начал искать другое решение.

Найденное решение оказалось очень простым и сложным. Сложность его в том, чтобы к нему прийти, а легкость… Легкость в его реализации. Это к слову о том, что HTML и CSS можно выучить за неделю, но уметь с ним работать, на это надо годы практики.

Теперь о самом решении. Поскольку конструкция
.border-inset <
border: 1px red solid inset;
>

Не сработала, я нашел простое решение. Для того, чтобы сделать внутреннюю границу мы будем использовать другой подход, а именно: использовать box-shadow.

Следующий код сделает нам внутреннюю черную границу у элемента:

.border-inset <
box-shadow: 1px 1px 0 #000 inset, -1px -1px 0 #000 inset;
>

Поясню как это работает: свойство box-shadow задает тень для элемента. У него есть несколько значений, которыми мы можем управлять, а именно: сместить тень по горизонтали, по вертикали, размыть тень, растянуть тень и задать цвет тени.

Само по себе свойство box-shadow позволяет нам использовать несколько наборов параметров через запятую, что мы и сделали.

Если говорить простым языком, мы сначала сместили тень на 1px по горизонтали и на 1px по вертикали, установили степень размытия 0, задали цвет #000 (черный) и указали, что тень будет внутри нашего элемента (inset). Степень размытия у нас 0, поэтому тень будет в 1px (без размытия). Таким образом мы указали левую и верхнюю границы. Затем мы добавили еще один набор значений (с отрицательными значениями), чтобы добавить правую и нижнюю границы.

Вот и все, таким простым способом мы сделали внутреннюю границу у элемента. Применять можно как к простому div’у, так и любому другому элементу, включая изображения. Вот, кстати, еще один из способов применения тени. Здесь я верстал обычную ссылку , но не совсем стандартного вида.

У меня есть элемент

Я предпочел бы, чтобы эта граница была -1px от края div. Сам div равен 100px x 100px, и если я добавлю границу, тогда мне нужно сделать некоторую математику, чтобы сделать границу.

Есть ли способ, которым я могу сделать границу, и убедитесь, что поле все равно будет 100 пикселей (включая границу)?

Задайте для свойства box-sizing значение border-box :

Вы также можете использовать box-shadow следующим образом:

Пример здесь: http://jsfiddle.net/nVyXS/ (наведите указатель мыши на рамку)

Это работает только в современных браузерах. Например: Нет поддержки IE 8. См. caniuse.com(функция box-shadow) для получения дополнительной информации.

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

Внутренняя граница через box-shadow свойство css

Да, box-shadow используется для добавления теней к элементам. Но вы можете указать тень inset , которая будет выглядеть как внутренняя граница, а не тень. Вам просто нужно установить горизонтальные и вертикальные тени на 0px и свойство spread » box-shadow на ширину границы, которую вы хотите иметь. Итак, для» внутренней» границы 10px вы должны написать следующее:

Вот пример jsFiddle, который иллюстрирует разницу между границей box-shadow и «нормальной» границей. Таким образом, ваша граница и ширина окна составляют всего 100 пикселей, включая границу.

Подробнее о box-shadow: здесь

Пограничная граница через свойство css

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

Оцените статью
толщина