Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании

Question

[NeOn4eG]

Хочу избавиться от фона-картинки, градиент сделаю через box-shadow в css, но как сделать пунктирную линию?


Нужно обойтись одним тегом, чтобы потом это скормить jqueryui.com/demos/button/
Есть идеи?

Comments

[Serator]

outline:1px dashed red;
outline-offset:-4px;

Answer 1

[CaptainQuazar]

<div></div>

body{background:#000}
div{
width:100px;
height:30px;
background:#F00;
border:#FF0 dashed 1px;
border-radius:5px;
Box-shadow:0px 1px 0px #f00,0px -1px 0px #f00,1px 0px 0px #f00,-1px 0px 0px #f00;
}

Так получиться должный эффект, обратите внимание, тень должна смотреть во все 4 стороны что бы не испортить фигуру.

Comments

[NeOn4eG]

вау, похоже это то что надо…
Спасибо!

[NeOn4eG]

Немного допилил…

	min-width: 100px;
	background: #aa0808;
	border: #fff dashed 1px;
	border-radius: 5px;
	box-shadow: inset #e20b0b -1px 26px 26px -13px, 0px 1px 0px #aa0808, 0px -1px 0px #e20b0b, 1px 0px 0px #aa0808, -1px 0px 0px #aa0808;
	text-align: center;
	color: #fff;
	text-shadow: #393939 1px 1px 0px;
	padding: 4px 10px 5px 12px;

Получилось вот что :)

Answer 2

[Serator]

outline:1px dashed red;
outline-offset:-4px;

Comments

[Даниил Конев]

Лучшее решение

Answer 3

[homm]

Дополню CaptainQuazar. 4 тени не нужны, достаточно одной.

<div></div>
<style>
body{background:#000}
div{
width:100px;
height:30px;
background:#F00;
border:#FF0 dashed 1px;
border-radius:5px;
Box-shadow:0px 0px 0px 2px #f00;
}
</style>

Comments

[CaptainQuazar]

Спасибо большое, а я и забыл о четвертом показателе.

Answer 4

[zibada]

outline: 1px solid #color;

Comments

[zibada]

упс.
dashed, а не solid.

[NeOn4eG]

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

[NeOn4eG]

хотя… может ну его нафиг, этот 1 пиксель отступа

[zibada]

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