Как задать границу любому элементу с помощью css без добавления ширины границы ко всей ширине элемента?

Как задать границу любому элементу с помощью css без добавления ширины границы ко всей ширине элемента?

Как и в Photoshop, мы можем нанести обводку - внутри, по центру и снаружи.

Я думаю, что свойства границы CSS по умолчанию - это центр, как центр в фотошопе, я прав?

Я хочу дать рамку внутри коробки, а не снаружи. и не хотите включать ширину границы в ширину поля.

outline:1px solid white;

Это не добавит лишней ширины и высоты.

Ознакомьтесь с CSS-размером окна ...

Свойство CSS3 размера блока может это сделать. Значение border-box (в отличие от значения по умолчанию для content-box) делает окончательный визуализированный блок объявленной шириной, а любые границы и отступы вырезаны внутри блока. Теперь вы можете безопасно объявить свой элемент со 100% шириной, включая отступы и границу на основе пикселей, и идеально выполнить свою задачу.

• -webkit-box-sizing: border-box; / * Safari / Chrome, другой WebKit * /
• -moz-box-sizing: рамка-рамка; / * Firefox, другой Gecko * /
• размер коробки: рамка-рамка; / * Opera / IE 8+ * /

Я предлагаю создать миксин, который справится с этим за вас. Дополнительную информацию о размере коробки можно найти на сайте W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

В зависимости от предполагаемой поддержки вашего браузера вы можете использовать box-shadowсвойство.

Вы можете установить значение размытия на 0 и разброс до любой желаемой толщины. Самое замечательное в тени блока заключается в том, что вы можете контролировать, будет ли она отображаться снаружи (по умолчанию) или внутри (с помощью insetсвойства).

Пример:

box-shadow: 0 0 0 1px black; // Outside black border 1px

или

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

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

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

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

Я столкнулся с той же проблемой.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Этот ответ позволяет указать одну единственную сторону. И будет работать в IE8 + - в отличие от box-shadow.

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

* Новый и улучшенный *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Это позволяет использовать границу и ударить по нескольким сторонам поля.

Используйте box-sizing: border-boxдля создания границы ВНУТРИ div без изменения ширины div.

Используется outlineдля создания границы ВНЕ div без изменения ширины div.

Вот пример: https://jsfiddle.net/4000cae9/1/

Примечания: в border-boxнастоящее время не поддерживается IE

Служба поддержки:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Как сказал Абенсон, вы можете использовать контур, но есть одна проблема: Opera может нарисовать «непрямоугольную форму». Другой вариант, который кажется работающим, - использовать отрицательные поля, например этот css:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

С этим html:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Еще один менее чистый вариант - добавить дополнительную разметку в html. Например, вы устанавливаете ширину внешнего элемента и добавляете границу к внутреннему. CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

И html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Используйте отступы, когда нет границы. Удалите отступы, когда есть граница.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

По сути, просто замените отступ 2px на границы 2px. Размер Div остается прежним.

В вашем случае вы можете выдумать его, вычтя половину границы из отступа? (-2,5 от отступа, если ваша граница имеет ширину 5 пикселей, у вас не может быть отрицательного отступа, поэтому, чтобы уменьшить его, уменьшите общую ширину поля). Вы можете добавить дополнительные 2,5 пикселя к полю, чтобы сохранить тот же размер поля в целом.

Мне действительно не нравится это предложение, но я не думаю, что есть способ справиться с этим чисто.

Таким образом, вы пытаетесь добиться того же, что и хорошо известная ошибка блочной модели IE ? Это невозможно. Или вы хотите поддерживать клиентов с IE только в Windows и выбираете doctype, который переводит IE в quirksmode .

Другой вариант, если у вас сплошной цвет фона:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

контур: сплошной черный цвет 3px || граница: сплошной черный 3px

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>