Ответ 1

Вы можете использовать box-shadow, возможно:

#something {
    background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
    min-width: 300px;
    min-height: 300px;
    box-shadow: inset 0 0 10px #0f0;
}

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  box-shadow: inset 0 0 10px #0f0;
}

<div id="something"></div>

Ответ 2

Я бы рекомендовал использовать box-sizing.

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

Ответ 3

Для создания вставки границы внутри элемента единственное решение, которое я нашел (и я попробовал все предложения в этой теме безрезультатно), это использовать псевдоэлемент, такой как: before

Например

.has-inset-border:before {
  content: "foo"; /* you need something or it will be invisible at least on Chrome */
  color: transparent;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border: 4px dashed red;
}

Свойство box-sizing не будет работать, так как граница всегда оказывается за пределами всего.

Опции box-shadow имеют двойной недостаток: они не работают на самом деле и не поддерживаются так широко (и, если вам нужно, требуют больше циклов ЦП для рендеринга).

Ответ 4

Это старый трюк, но я все же считаю, что самый простой способ сделать это - использовать outline-offset с отрицательным значением (пример ниже использует -6px). Здесь fiddle: я сделал внешнюю границу красной и контурную белую, чтобы различать два:

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

Ответ 5

Если вы хотите убедиться, что граница находится внутри вашего элемента, вы можете использовать

box-sizing:border-box;

это поместит следующую границу внутри элемента:

border: 10px solid black;

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

Обратите внимание на другой ответ выше: как только вы используете любую inset для box-shadow определенного элемента, вы ограничиваетесь максимум 2 box-shadows для этого элемента и вам потребуется div-обертка для дальнейшего затенения.

Оба решения должны также избавить вас от нежелательных 3D-эффектов. Также обратите внимание, что оба решения являются наращиваемыми (см. Пример, который я добавил в 2018 году)

.example-border {
  width:100px;
  height:100px;
  border:40px solid blue;
  box-sizing:border-box;
  float:left;
}

.example-shadow {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  box-shadow:0 0 0 40px green inset;
}

.example-combined {
  width:100px;
  height:100px;
  float:left;
  margin-left:20px;
  border:20px solid orange;
  box-sizing:border-box;
  box-shadow:0 0 0 20px red inset;
}

<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>

Ответ 6

Я не знаю, с чем вы сравниваетесь.

Но супер простой способ иметь вставку с рамкой по сравнению с другими неграничными элементами - это добавить border: ?px solid transparent; к тем, у кого нет границы.

Это сделает рамку в виде вставки.

http://jsfiddle.net/cmunns/cgrtd/

Ответ 7

Если box-sizing не является опцией, другой способ сделать это - просто сделать его дочерним по размеру элемента.

Демо

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }

HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>

Ответ 8

Вы можете использовать background-clip: border-box;

Пример:

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

Ответ 9

Итак, я пытался отобразить рамку при наведении, но она переместила всю нижнюю панель главного меню, которая не выглядела так хорошо, что я исправил ее следующим образом:

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

Я надеюсь, что это поможет кому-то там.

Ответ 10

Простое решение SCSS с псевдоэлементами

Демонстрационная версия: https://codepen.io/vlasterx/pen/xaMgag

// Change border size here
$border-width: 5px;

.element-with-border {
	display: flex;
	height: 100px;
	width: 100%;
	position: relative;
	background-color: #f2f2f2;
	box-sizing: border-box;
	
	// Use pseudo-element to create inset border
	&:before {
		position: absolute;
		content: ' ';
		display: flex;
		border: $border-width solid black;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: $border-width solid black;
		// Important: We must deduct border size from width and height
		width: calc(100% - $border-width); 
		height: calc(100% - $border-width);
	}
}

<div class="element-with-border">
  Lorem ipsum dolor sit amet
</div>

Ответ 11

Вы можете сделать это:

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}

Ответ 12

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

Концепция заключается в использовании селектора: after (или: before) для размещения границы в родительском элементе.

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }