Как настроить границу внутри div

Мне просто интересно, есть ли способ создать div с "границей" внутри div. Я имею в виду: у меня есть div 200px, например, и я хочу, чтобы граница была внутри 200 пикселей без превышения.

Мне нужно добиться эффекта div с границей не на краю фигуры, а на 5px больше внутри. Изображение может говорить более сотни слов

Я хочу это:

Вот мой код:

http://jsfiddle.net/hpLYD/1/

CSS:

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid blue;
}

Свойство padding расширяет весь div, включая границу.

Как я могу достичь этого эффекта, используя только css? Является ли это возможным?

Ответы

Ответ 1

Вы можете сделать это, используя свойство CSS3 box-shadow. Добавьте в свой CSS следующее:

box-shadow: 0px 0px 0px 5px #f00;

Пример jsFiddle

Ответ 2

В то время как коробочная тень, скорее всего, лучший способ пойти, люди, похоже, забывают, что вопрос требует, чтобы граница не превышала 200 пикселей. Чтобы действительно достичь этого, вы можете использовать параметр inset в атрибуте box-shadow (который сделает внутреннюю тень).

Вам также необходимо изменить box-sizing на border-box так, чтобы размер был пропорционален границе, а не содержимому.

Здесь JSFiddle с результатом

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: red;
    border: 3px solid red;
    box-shadow: 0px 0px 0px 5px blue inset;
    box-sizing: border-box;
}

Ответ 3

<div class="mydiv"></div>

.mydiv{
  position:relative;
  height:150px;
  width:200px;
  background:#f00;
}
.mydiv:before{
  position:absolute;
  content:'';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left:10px;
  right: 10px;
  border:1px solid #daa521;
}

Здесь JSFiddle с результатом

Ответ 4

Вы не можете поместить границу внутри элемента, однако вы можете использовать box-shadow, чтобы дать эффект:

.circle {
    border-radius: 50%;
    width: 190px;
    height: 190px;
    background: red;
    border: 3px solid blue;
    box-shadow:  0px 0px 0px 10px red; /* 10px box-shadow */
}

Пример JSFiddle.

Обратите внимание, что это свойство стиля CSS3 и не поддерживается во всех браузерах. Вам также может потребоваться использовать префиксы поставщика в некоторых браузерах (-webkit, -moz и т.д.). Проверьте http://caniuse.com/#search=box-shadow для поддержки.

Ответ 5

Я полагаю, вы могли бы добавить еще один класс в круг.

Я сделал это для вас.

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

.scirle {see fiddle}

http://jsfiddle.net/hpLYD/7/embedded/result/

Ответ 6

Проблема заключается в том, что граница занимает экранную недвижимость, нравится нам это или нет.

Если граница 1px находится на 100px-элементе, даже если бы мы могли заставить ее появиться внутри, этот элемент теперь будет только 98px внутри. Но в действительности мы застряли в действительности, это элемент 100px, который на самом деле 102px вызван границами снаружи. Пограничный ящик, кажется, ничего не делает для границ в последнем Chrome - они всегда появляются снаружи.

Простым способом решения этого является использование абсолютно позиционированного элемента CSS :after или :before, в основном это означает, что никакое пространство на экране не будет потеряно границей. Пример:

.border{ position: relative; }
.border{ content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px dashed rgba(50,50,50,0.5); }