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

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

Нужно обойтись одним тегом, чтобы потом это скормить jqueryui.com/demos/button/
Есть идеи?
  • Вопрос задан
  • 43581 просмотр
Решения вопроса 1
CaptainQuazar
@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 стороны что бы не испортить фигуру.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
homm
@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>
Ответ написан
@zibada
outline: 1px solid #color;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы