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

Как и в Photoshop, мы можем дать штрих внутри, в центре и снаружи

Я думаю, что свойства border css по умолчанию находятся в центре, как центр в Photoshop, я прав?

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

Ответы

Ответ 1

outline:1px solid white;

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

Ответ 2

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

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

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

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

Ответ 3

В зависимости от вашей предполагаемой поддержки браузера вы можете использовать свойство 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;

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

Ответ 4

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

.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;
}

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

Ответ 5

Как сказал abenson, вы можете использовать outline, но один из них - это то, что 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>

Ответ 6

Используйте box-sizing: border-box, чтобы создать границу INSIDE, без изменения ширины div.

Используйте outline для создания рамки OUTSIDE 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>

Ответ 7

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

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

Ответ 8

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

.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 padding на 2px-границы. Размер Div остается тем же.

Ответ 9

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

Ответ 10

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

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
}

Ответ 11

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

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

}

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

<div>
hello world
</div>