У меня есть <div>
элемент, и я хочу поставить на него границу. Я знаю, что могу писать style="border: 1px solid black"
, но это добавляет 2px по обе стороны от div, что не то, что я хочу.
Я бы предпочел, чтобы эта граница была -1px от края div. Сам div имеет размер 100px x 100px, и, если я добавлю границу, мне нужно будет немного по математике, чтобы она появилась.
Можно ли как-нибудь сделать так, чтобы граница появилась, и чтобы окно по-прежнему было 100px (включая границу)?
Ответы:
Установите
box-sizing
свойство вborder-box
:Это работает на IE8 и выше .
источник
outline
.box-sizing
caniuse.com/#search=box-sizingВы также можете использовать box-shadow следующим образом:
Пример здесь: http://jsfiddle.net/nVyXS/ (наведите курсор для просмотра границы)
Это работает только в современных браузерах. Например: нет поддержки IE 8. См. Caniuse.com (функция box-shadow) для получения дополнительной информации.
источник
Возможно, это запоздалый ответ, но я хочу поделиться своими выводами. Я нашел 2 новых подхода к этой проблеме, которых я не нашел здесь в ответах:
Внутренняя граница через
box-shadow
свойство cssДа, box-shadow используется для добавления box-shadows к элементам. Но вы можете указать
inset
тень, которая будет выглядеть как внутренняя граница, а не как тень. Вам просто нужно установить горизонтальные и вертикальные тени0px
иspread
свойство " "box-shadow
ширины границы, которую вы хотите иметь. Таким образом, для «внутренней» границы 10px вы должны написать следующее:Вот пример jsFiddle, который иллюстрирует разницу между
box-shadow
границей и «нормальной» границей. Таким образом, ваша граница и ширина окна составляют 100 пикселей, включая границу.Подробнее о box-shadow: здесь
Граница через свойство css
Вот другой подход, но таким образом граница будет за пределами коробки. Вот пример . Как следует из примера, вы можете использовать
outline
свойство css , чтобы установить границу, которая не влияет на ширину и высоту элемента. Таким образом, ширина границы не добавляется к ширине элемента.Подробнее о набросках: здесь
источник
Yahoo! Это действительно возможно. Я нашел это.
Для нижней границы:
Для верхней границы:
источник
Используйте псевдоэлемент :
Используя
::after
вы стилизуете виртуальный последний дочерний элемент выбранного элемента.content
Свойство создает анонимный замененный элемент .Мы содержат псевдоэлемент, использующий абсолютную позицию относительно родителя. Тогда у вас есть свобода выбора любого собственного фона и / или границы фона основного элемента.
Этот подход не влияет на размещение содержимого основного элемента, который отличается от использования
box-sizing: border-box;
.Рассмотрим этот пример:
Здесь
.button
ширина ограничена с использованием родительского элемента. Установкаborder-left-width
корректирует размер поля содержимого и, следовательно, положение текста.Использование подхода псевдоэлемента не влияет на размер поля содержимого.
В зависимости от приложения подход с использованием псевдоэлемента может быть или не быть желательным поведением.
источник
:Before
.Хотя этот вопрос уже адекватно ответили решение , используя
box-shadow
иoutline
свойство, я хотел бы немного расширить это для всех тех , кто высадился здесь (как и я) в поисках решения для внутренней границы с смещениемДопустим, у вас есть черный 100px x 100px,
div
и вам нужно вставить его в белую рамку - с внутренним смещением 5px (скажем) - это все еще можно сделать с помощью указанных выше свойств.коробчатого тень
Хитрость заключается в том, чтобы знать, что допускается несколько теней box-box, где первая тень находится сверху, а последующие тени имеют более низкий z-порядок.
С этим знанием объявление box-shadow будет:
Показать фрагмент кода
По сути, это объявление гласит: сначала визуализируем последнюю (10px белую) тень, затем визуализируем предыдущую 5px черную тень над ней.
контур с контуром-смещением
Для того же эффекта, что и выше, наброски объявлений будут:
Показать фрагмент кода
NB:
outline-offset
не поддерживается IE, если это важно для вас.Codepen демо
источник
Вы можете использовать свойства
outline
иoutline-offset
с отрицательным значением вместо обычногоborder
, работает для меня:источник
Я знаю, что это несколько старше, но так как ключевые слова «граница внутри» привели меня прямо сюда, я хотел бы поделиться некоторыми выводами, которые, возможно, стоит упомянуть здесь. Когда я добавлял границу для состояния наведения, я получил эффекты, о которых говорит OP. Граница рекламирует пиксели в соответствии с размером окна, что делает его нервным. Есть еще два способа справиться с этим, которые также работают для IE7.
1) Иметь границу, уже прикрепленную к элементу, и просто изменить цвет. Таким образом, математика уже включена.
2) Компенсировать вашу границу с отрицательным запасом. Это все равно добавит лишние пиксели, но позиционирование элемента не будет
источник
для согласованного рендеринга между новыми и старыми браузерами добавьте двойной контейнер, внешний с шириной, внутренний с рамкой.
это очевидно, только если ваша точная ширина важнее, чем дополнительная разметка!
источник
источник
Лучшее кросс-браузерное решение (в основном для поддержки IE), как сказал @Steve, - это сделать div 98px по ширине и высоте, а затем добавить границу 1px вокруг него, или вы можете создать фоновое изображение для div 100x100 px и нарисовать на нем границу.
источник
Вы можете посмотреть на схему со смещением, но для этого нужно добавить некоторые отступы. Или вы можете расположить границу внутри, что-то вроде
Возможно, вам придется возиться с полями на поддельных границах div, чтобы подогнать его под себя.
источник
Более современным решением может быть использование CSS
variables
иcalc
.calc
широко поддерживается, ноvariables
еще не в IE11 (полифиллы доступны).Хотя для этого используются некоторые расчеты, которых исходные вопросы пытались избежать. Я думаю, что сейчас самое время использовать расчеты, так как они контролируются самим css. Также нет необходимости в дополнительной разметке или незаконном присвоении других свойств CSS, которые могут понадобиться позже.
Это решение действительно полезно, только если фиксированная высота не требуется .
источник
Одним из решений, которое я не увидел выше, является случай, когда у вас есть заполнение на входе, что я делаю в 99% случаев. Вы можете сделать что-то вроде ...
Что мне нравится в этом, так это то, что у меня есть полное меню свойств border + padding + transition для каждой стороны.
источник