it-swarm.com.ru

CSS Inset Borders

У меня есть быстрый вопрос о границах 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

Есть идеи?

58
JacobTheDev

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

124
David Thomas

Я бы рекомендовал использовать 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;
  }
34
Stefan Hans Schonert

Для создания вставки границы внутри элемента единственное решение, которое я нашел (и я попробовал все предложения в этой теме, но безрезультатно), это использовать псевдоэлемент, такой как: 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;
  width: 10px;
  border: 4px dashed red;
}

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

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

11
podperson

Это старый трюк, но я все же нахожу самый простой способ сделать это - использовать контурное смещение с отрицательным значением (в приведенном ниже примере используется -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>
7
Vanessa King

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

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

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

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

2
Adam Munns

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

box-sizing:border-box;

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

border: 10px solid black;

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

Примечание к другому ответу, приведенному выше: как только вы используете любую inset для box-shadow определенного элемента, вы ограничиваетесь максимум двумя тенями box-box для этого элемента и вам потребуется 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>

2
Chris S.

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

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

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

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

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

0
Derrik de Moei

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

0
Vladimir Jovanović

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

Если 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>
0
Adam Grant