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

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

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

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

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

11 77
css css3

11 ответов:

outline:1px solid white;

это не добавит дополнительную ширину и высоту.

185

Проверьте CSS box-sizing...

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

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

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

23

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

вы можете установить значение размытия в 0 и распространение до какой бы толщины вы ни были. Самое замечательное в box shadow заключается в том, что вы можете контролировать, рисуется ли он снаружи (по умолчанию) или внутри (используя 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;

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

17

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

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

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

15

как abenson сказал, Вы можете использовать контур но одна из них заключается в том, что опера может нарисовать "непрямоугольную форму". Другой вариант, который, кажется, работает, чтобы использовать отрицательные поля, такие как этот 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>
5

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

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

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

заметки: border-box В настоящее время она не поддерживается Т. е.

поддержка:

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>
5

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

.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 остается прежним.

3

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

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

2

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

1

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

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
}
0

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

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

}

div{    /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>
0