CSS вне границы - PullRequest
Новая
       4

CSS вне границы

49 голосов
/ 02 февраля 2012

Я хочу иметь возможность нарисовать границу за пределами моего Div!Поэтому, если мой div скажет 20px на 20px, я хочу, чтобы граница за пределами этого составляла 1px (поэтому, по сути, я получаю div 22x22px большим).

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

CSS-контур работает, но я хочу толькото, что мне нужно, это то, что мне не нравится, например, контурное дно, которое не работает.

Есть ли способ сделать это?

Спасибо

Ответы [ 6 ]

56 голосов
/ 02 февраля 2012

Я думаю, вы немного разбираетесь в этих двух свойствах.Граница влияет на внешний край элемента, делая элемент разным по размеру.Схема не изменит размер или положение элемента (не занимает места) и выходит за границы.Из вашего описания вы хотите использовать свойство border.

Посмотрите на простой пример ниже в вашем браузере: 

<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>

<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>

Обратите внимание, как граница сдвигает нижний элемент div, но контур не перемещает верхний элемент div и контур фактически перекрывает нижний элемент div.Подробнее об этом можно прочитать здесь:
Граница
Схема

12 голосов
/ 21 апреля 2014

Попробуйте свойство структуры W3Schools - CSS Outline

Структура не будет влиять на ширину и длину элементов / элементов!

Пожалуйста, нажмите на ссылку, которую я предоставил нав нижней части см. рабочие демонстрации различных способов создания границ и внутренних / встроенных границ, даже тех, которые не нарушают размеры элемента!Нет необходимости добавлять дополнительные div каждый раз, как упоминалось в другом ответе!

Вы также можете комбинировать границы с контурами и, если хотите, box-shadows (также показывается по ссылке) 

<head>
   <style type="text/css" ref="stylesheet">
      div {
        width:22px;
        height:22px;
        outline:1px solid black;
      }
   </style>
</head>
<div>
    outlined
</div>

Обычно по умолчанию «border:» помещает границу снаружи ширины, измерения, добавляя к общим размерам, если вы не используете значение «inset»: 

div {border: inset solid 1px black};

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

Надеюсь, это поможет

PS: я также был вдохновлен, чтобы сделать этодля вас : Использование границ, контуров и теней

11 голосов
/ 02 февраля 2012

IsisCode дает вам хорошее решение. Другим является размещение границы div внутри родительского div. Проверьте этот пример http://jsfiddle.net/A2tu9/

UPD: Вы также можете использовать псевдоэлемент :after (:before), в этом случае HTML не будет загрязнен дополнительной разметкой: 

.my-div {
    position: relative;
    padding: 4px;
    ...
}
.my-div:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    bottom: -3px;
    right: -3px;
    border: 1px #888 solid;
}

Демо: http://jsfiddle.net/A2tu9/191/

8 голосов
/ 27 мая 2015

Почему бы просто не использовать background-clip? 

-webkit-background-clip: padding;
   -moz-background-clip: padding;
        background-clip: padding-box;

См:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css -tricks.com / альманах / свойства / б / фон-клип

6 голосов
/ 22 января 2014

Уже поздно, но я столкнулся с подобной проблемой.
Моим решением были псевдоэлементы - без дополнительной разметки, и вы можете нарисовать границу, не влияя на ширину.
Расположите псевдоэлемент абсолютно (с основным позиционированным относительно) и whammo.

См. Ниже, JSFiddle здесь . 

.hello {
    position: relative;
    /* Styling not important */
    background: black;
    color: white;
    padding: 20px;
    width: 200px;
    height: 200px;
}

.hello::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -5px;
    right: -5px;
    bottom: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
    z-index: -1;
}
4 голосов
/ 02 февраля 2012

Поместите ваш div в другой div, примените границу к внешнему div с n количеством отступов / поля, где n - это расстояние между ними.

...