Layout. Como implementar border dentro de um bloco, e não em sua fronteira? Exemplo na descrição

Quero livrar-se do plano de fundo-imagens, gradiente farei através de box-shadow no css, mas como fazer com que a linha pontilhada?
image

Precisa fazer uma tag, para, então, é alimentar jqueryui.com/demos/button/
Tem ideias?


Answers 4:

Share:


Shrikant Dolle
Answer 1


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


Assim, ter algum efeito, note-se, a sombra deve olhar em todos os 4 lados para não estragar a forma.


Alix -
Answer 2

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


Praveen Kumar
Answer 3

Дополню CaptainQuazar. 4 a sombra não precisa, basta uma.


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


Jaylin Torres
Answer 4

outline: 1px solid #cor;