Нужно сделать блок с такой обводкой
Но если использовать border: 2px dashed #15acd3
, то получается так:
Возможно ли через CSS задавать как длину штриха и отступы между штриками?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуbackground-image
с SVG. Регулировать расстояния между черточкам нужно в свойстве stroke-dasharray
.
Источник: stroke-dasharray
.block {
width: 200px;
height: 100px;
background-color: #999;
background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill: none; stroke: red; stroke-width: 4; stroke-dasharray: 5 20'/></svg>");
}
<div class="block"></div>
К сожалению, этого нельзя сделать. Но, если вам хочется кастомный бордер, то можно использовать вариант с картинкой:
border-style: solid;
border-width: 2px;
border-image: url('borderImageURL') 2 fill repeat;
Не забудьте про вендорные префиксы для свойства border-imagе, если нужна повышенная кросбраузерность.
в html:
<div class="hr"></div>
в css:
.hr {
width: 100%;
height: 1px;
margin: 5px 0;
background-image: linear-gradient(to right, #fff 40%, red 40%);
background-size: 10px 1px;
background-repeat: repeat-x;
}