8

Нужно сделать блок с такой обводкой

введите сюда описание изображения

Но если использовать border: 2px dashed #15acd3, то получается так:

введите сюда описание изображения

Возможно ли через CSS задавать как длину штриха и отступы между штриками?

3 ответа 3

8

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>

5

К сожалению, этого нельзя сделать. Но, если вам хочется кастомный бордер, то можно использовать вариант с картинкой:

border-style: solid;
border-width: 2px;
border-image: url('borderImageURL') 2 fill repeat;

Не забудьте про вендорные префиксы для свойства border-imagе, если нужна повышенная кросбраузерность.

1

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.