CSS Inset Borders

Question

У меня быстрый вопрос по границам CSS.

Мне нужно создать сплошную цветную вставку. Это немного CSS, который я использую:

border: 10px inset rgba(51,153,0,0.65);

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

http://dl.dropbox.com/u/12147973/border-current.jpg

Это цель:

http://dl.dropbox.com/u/12147973/border-boal.jpg

Есть идеи?

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

Это имеет преимущество в том, что оно накладывается на фоновое изображение div, но оно, конечно, размыто (как и следовало ожидать)из свойства box-shadow).Чтобы создать density тени, вы можете добавить дополнительные тени:

#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 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #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 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}

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

Отредактировано , потому что я поняла, что я идиот, и забыла предложить самое простое решение first , которое использует в противном случае пустой дочерний элемент для применения границ надфон:

#something {
  background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
  min-width: 300px;
  min-height: 300px;
  padding: 0;
  position: relative;
}
#something div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(0, 255, 0, 0.6);
}

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

Отредактировано после комментария @ CoryDanielson, ниже :

jsfiddle.net / dPcDu / 2 вы можете добавить 4-й параметр px для 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 0 10px rgba(0, 255, 0, 0.5);
}

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

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

Answer 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-shadow имеют два недостатка: они не работают на самом деле ине поддерживается так широко (и требует больше циклов ЦП для рендеринга, если вам это нужно).

Answer 4

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

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

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

Answer 5

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

box-sizing:border-box;

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

border: 10px solid black;

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

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

Оба решения должны также избавить вас от нежелательных трехмерных эффектов.Также обратите внимание, что оба решения являются наращиваемыми (см. Пример, который я добавил в 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>

Answer 6

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

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

Это заставит граничный элемент выглядеть вставным.

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

Answer 7

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

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

Answer 8

Простое решение 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>

Answer 9

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

Answer 10

Вы можете использовать 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>