Задать вопрос
NeOn4eG
@NeOn4eG
html

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

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сканер коэффициентов в букмекерских конторах
20 апр. 2024, в 08:39
100000 руб./за проект
Доработать бота
20 апр. 2024, в 08:24
1500 руб./за проект
Разработать интранет сайт (корпоративный портал)
20 апр. 2024, в 07:24
100000 руб./за проект
Ещё заказы