Как придать границу любому элементу, используя css, не добавляя border-width ко всей ширине элемента? - PullRequest
Новая
       18

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

85 голосов
/ 01 мая 2010

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

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

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

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

Ответы [ 11 ]

201 голосов
/ 30 ноября 2011 
outline:1px solid white;

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

26 голосов
/ 01 августа 2014

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

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

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

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

20 голосов
/ 11 февраля 2013

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

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

15 голосов
/ 03 мая 2013

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

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

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

6 голосов
/ 26 апреля 2012

Как сказал Абенсон, вы можете использовать контур , но одна проблема заключается в том, что 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>
5 голосов
/ 17 марта 2015

Используйте 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>
3 голосов
/ 25 января 2014

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

.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 голосов
/ 01 мая 2010

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

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

1 голос
/ 01 мая 2010

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

0 голосов
/ 13 ноября 2017

контур: сплошной черный 3px || рамка: 3px, сплошной черный 

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

}

div{    /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...