У меня есть элемент <div>, и я хочу поместить на него границу. Я знаю, что могу написать style="border: 1px solid black", но это добавляет 2px по обе стороны от div, чего я не хочу.
Я предпочел бы, чтобы эта граница была -1px от края div. Сам div равен 100px x 100px, и если я добавлю границу, тогда мне нужно сделать некоторую математику, чтобы сделать границу.
Есть ли способ, которым я могу сделать границу, и убедитесь, что поле все равно будет 100 пикселей (включая границу)?
Задайте для свойства box-sizing значение border-box:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}<div>Hello!</div>
<div>Hello!</div>Вы также можете использовать box-shadow следующим образом:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Пример здесь: http://jsfiddle.net/nVyXS/ (наведите указатель мыши на рамку)
Это работает только в современных браузерах. Например: Нет поддержки IE 8. См. caniuse.com(функция box-shadow) для получения дополнительной информации.
Возможно, это запоздалый ответ, но я хочу поделиться своими выводами. Я нашел два новых подхода к этой проблеме, которые я не нашел здесь в ответах:
box-shadow свойство cssДа, box-shadow используется для добавления теней к элементам. Но вы можете указать тень inset, которая будет выглядеть как внутренняя граница, а не тень. Вам просто нужно установить горизонтальные и вертикальные тени на 0px и свойство spread "box-shadow на ширину границы, которую вы хотите иметь. Итак, для" внутренней" границы 10px вы должны написать следующее:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Вот пример jsFiddle, который иллюстрирует разницу между границей box-shadow и "нормальной" границей. Таким образом, ваша граница и ширина окна составляют всего 100 пикселей, включая границу.
Подробнее о box-shadow: здесь
Вот еще один подход, но таким образом граница будет вне поля. Вот пример .
Как следует из примера, вы можете использовать свойство css outline, чтобы установить границу, которая не влияет на ширину и высоту элемента. Таким образом, ширина границы не добавляется к ширине элемента.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
Подробнее о схеме: здесь
Yahoo! Это действительно возможно. Я нашел его.
Для нижней границы:
div {box-shadow: 0px -3px 0px red inset; }
Для верхней границы:
div {box-shadow: 0px 3px 0px red inset; }
Используйте псевдоэлемент:
.button {
background: #333;
color: #fff;
float: left;
padding: 20px;
margin: 20px;
position: relative;
}
.button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #f00;
}<div class='button'>Hello</div> Хотя на этот вопрос уже были даны адекватные ответы с решениями, использующими свойства box-shadow и outline, я хотел бы немного расширить это для всех тех, кто приземлился здесь (как и я) в поисках решения для внутренней границы со смещением
Допустим, у вас есть черный div 100px x 100px, и вам нужно вставить его в белую рамку - с внутренним смещением 5px (скажем) - это все еще можно сделать с помощью указанных выше свойств.
Хитрость здесь заключается в том, чтобы знать, что допускается несколько теней, где первая тень находится сверху, а последующие тени имеют более низкий z-порядок.
С этим знанием объявление box-shadow будет:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {
width: 100px;
height: 100px;
background: black;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
}<div></div> Вы можете использовать свойства outline и outline-offset с отрицательным значением вместо обычной border, у меня работает:
div{
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
div#border{
border: 2px solid red;
}
div#outline{
outline: 2px solid red;
outline-offset: -2px;
}Using a regular border.
<div id="border"></div>
Using outline and outline-offset.
<div id="outline"></div>Я знаю, что это несколько старше, но поскольку ключевые слова "граница внутри" приземлили меня прямо здесь, я хотел бы поделиться некоторыми выводами, которые можно здесь упомянуть. Когда я добавлял границу в состояние зависания, я получил эффекты, о которых говорит OP. Пограничные рекламные пиксели до размера окна, что сделало его неустойчивым. Есть еще два способа справиться с этим, которые также работают для IE7.
1) Прикрепите границу к элементу и просто измените цвет. Таким образом, математика уже включена.
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2) Компенсируйте свою границу с отрицательной маржой. Это все равно добавит дополнительные пиксели, но позиционирование элемента не будет нажимать на
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
для последовательного отображения между новыми и старыми браузерами, добавьте двойной контейнер, внешний с шириной, внутренний с границей.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
это, очевидно, только в том случае, если ваша точная ширина важнее дополнительной разметки!
Если вы используете размер окна: border-box означает не только границу, заполнение, маржа и т.д. Весь элемент будет находиться внутри родительского элемента элемент.
div p {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height:100%;
border: 20px solid #f00;
background-color: #00f;
color:#fff;
padding: 10px;
}<div>
<p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>Лучшее кросс-браузерное решение (в основном для поддержки IE), например, @Steve, должно сделать div 98px по ширине и высоте, чем добавить границу вокруг 1px, или вы можете сделать фоновое изображение для div 100x100 px и нарисовать границу на нем.
Вы можете посмотреть на схему со смещением, но для этого нужно добавить некоторые отступы. Или вы можете расположить границу внутри, что-то вроде
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
Возможно, вам придется возиться с полями на поддельных границах div, чтобы подогнать его под себя.