Округленный интервал между точками в css

Я изучал пунктирные границы, поддерживающие webkit и IE 9+.Округленный интервал между точками в css

Я в настоящее время 'простой' пунктирный эффект границы так:

.bord { 
 
    height: 200px; 
 
    width: 300px; 
 
    background: gray; 
 
    border-radius: 20px; 
 
    position: relative; 
 
} 
 
.bord:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: calc(90% - 10px); 
 
    width: calc(90% - 10px); 
 
    left: 5%; 
 
    top: 5%; 
 
    border: 5px dotted black; 
 
}

<div class="wrapper"> 
 
    <div class="bord"></div> 
 
</div>

, который делает (в хроме):

enter image description here

Но я бы хотел:

enter image description here

Будет ли это возможно с использованием чистого CSS?

(так как я не могу использовать пограничную-изображение Internet Explorer 10 и более ранние версии не поддерживают border-image property.)

Я смотрел на docs, но не мог видеть каких-либо ссылок, и Я видел такие вещи, как this, но, очевидно, не помогает мне здесь.

Есть ли свойство CSS, которое я здесь отсутствует? Или альтернативная возможность? (ИМО, однако, эти «точки» должны быть округлены в любом случае), но «округленные точки» также будут полезными.

источник

2015-02-04 jbutler483

Я нашел предыдущий ответ на этот вопрос здесь: http://stackoverflow.com/questions/6250394/how-to-increase-space-between-dotted-border-dots –

@mattytommo Это адресовано в вопросе. –

@mattytommo: Если вы полностью прочитали вопрос, вы поймете, почему это не вариант (** hint **: прочитайте первую строку) – jbutler483

Это самое близкое, что я мог бы достичь. Он использует несколько коробок теней одного смещения псевдоэлемента в требуемые позиции.

Это может быть легко преобразовано в границу пунктиром, добавив нижнюю строку к псевдоэлементу.

border-radius: 50%;

Box Shadow is supported in IE9+ also.

Примечание: Этот подход будет работать, если у вас есть фиксированная высота и ширина. Не идеальный подход, но я думаю, что это можно сделать с помощью CSS с поддержкой IE9 +.

.bord { 
 
    height: 185px; 
 
    width: 250px; 
 
    background: gray; 
 
    border-radius: 20px; 
 
    position: relative; 
 
    padding: 25px; 
 
} 
 
.bord:before { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    content:''; 
 
    background: black; 
 
    height: 5px; 
 
    width: 5px; 
 
    box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black; 
 
}

<div class="wrapper"> 
 
    <div class="bord">abcd</div> 
 
</div>

Следующий фрагмент строго не ответ на текущий вопрос, как IE9 + Поддержка специально упоминается. Это был мой первоначальный ответ (неверный) и сохраняется как часть ответа, чтобы помочь будущим читателям, которым может не понадобиться поддержка IE9. Этот параметр использует linear-gradient и background-position (оба из которых могут поддерживать процентные значения) и, следовательно, могут быть более масштабируемыми, чем другие.

.bord { 
 
    height: 235px; 
 
    width: 300px; 
 
    background: gray; 
 
    border-radius: 20px; 
 
    position: relative; 
 
} 
 
.bord:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: calc(90% - 10px); 
 
    width: calc(90% - 10px); 
 
    left: 5%; 
 
    top: 5%; 
 
    background: linear-gradient(90deg, black 10%, transparent 10%), linear-gradient(90deg, black 10%, transparent 10%);  
 
    background-size: 50px 5px; 
 
    background-repeat: repeat-x; 
 
    background-position: 5px 5px, 5px 195px; 
 
} 
 
.bord:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: calc(90% - 10px); 
 
    width: calc(90% - 10px); 
 
    left: 5%; 
 
    top: 5%; 
 
    background: linear-gradient(0deg, black 10%, transparent 10%), linear-gradient(0deg, black 10%, transparent 10%); 
 
    background-size: 5px 50px; 
 
    background-repeat: repeat-y; 
 
    background-position: 5px 0px, 255px 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="bord"></div> 
 
</div>

источник

2015-02-04 16:41:53 Harry

Я думаю, что со всеми этими префиксами -webkit это, вероятно, не работает в IE9 +? –

@JamesMontagne: Наверное, да, но я думаю, что линейные градиенты в целом могут работать. Позвольте мне проверить, хотя. Спасибо за указание :) – Harry

@JamesMontagne: Еще раз спасибо за указание помощника. Я добавил альтернативное решение, которое должно работать в IE9 +, поскольку оно использует только тени. – Harry

CSS3 Множественные фоновые изображения (должны) работать в IE9. Поэтому просто используйте фоновое изображение и нарисуйте его на четырех углах элемента. Это должно быть так.

Чтобы сделать интересные вещи, вы также можете использовать SVG изображение, такие как эти:

svg { 
 
    background-color: #999; 
 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="4" cy="4" r="4" fill="#000000"></circle></svg> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="12" cy="4" r="4" fill="#000000"></circle></svg> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="12" cy="12" r="4" fill="#000000"></circle></svg> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="4" cy="12" r="4" fill="#000000"></circle></svg>

The SVG изображение может быть встроен внутри CSS с использованием данных URI. Положив все это вместе:

.bord { 
 
    width: 320px; 
 
    height: 224px; 
 
    border-radius: 16px; 
 
    position: relative; 
 
    background: #999; 
 
} 
 
.bord:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 16px; 
 
    top: 16px; 
 
    right: 16px; 
 
    bottom: 16px; 
 
    background: 
 
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") 
 
     left top repeat-x, 
 
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") 
 
     top right repeat-y, 
 
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") 
 
     right bottom repeat-x, 
 
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E") 
 
     bottom left repeat-y; 
 
}

<div class="bord"></div>

источник

2015-02-04 18:44:00

Там в CSS трюк с использованием градиентов, чтобы сделать это.

element { 
    background-position: top; 
    background-image: linear-gradient(to right, #f8f8f8 20%, rgba(255,255,255,0) 0%); 
    background-size: 5px 1px; 
    background-repeat: repeat-x; 
}

Я сделал SCSS mixin для реализации этого и быстро меняю цвета, размеры, позиции и расстояние. Проверьте это на github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin.

источник

2015-08-31 21:23:59

Округленный интервал между точками в css

ответ

Смежные вопросы