Я пытаюсь выяснить, как добавить пунктирную границу, которая будет выглядеть одинаково в последних браузерах Firefox, Chrome, Safari и IE10 +. Обычный 1px dashed #000 не работает для меня, потому что во всех браузерах он отличается, а image не масштабируется.Пунктирная граница с использованием градиента css
Я пытаюсь выяснить, как это сделать с помощью градиента CSS.
Было бы здорово, если бы была возможность контролировать длину штриха.
Вы можете использовать border-image для этого:
div {
width: 100px;
height: 50px;
border: 10px solid transparent;
-webkit-border-image: url('http://www.w3schools.com/cssref/border.png') 30;
-o-border-image: url('http://www.w3schools.com/cssref/border.png') 30;
border-image: url('http://www.w3schools.com/cssref/border.png') 30;
}<div></div>Что относительно ie10-11? Будет ли там работать? Это важно. Как я писал, я не хочу использовать изображение, я использовал для обрезки изображения одного тире в прошлом, но, похоже, это решение. – Rantiev
@ Rantiev Если вы полагаетесь на стили браузера по умолчанию, чем согласитесь, что стили могут меняться в зависимости от браузера и OS – Justinas
Я хочу иметь такую же пунктирную границу, что и градиент в списке браузеров, который я предоставил. – Rantiev
Возможный дубликат [Контроль пунктирную длины границы хода и расстояние между штрихами] (http://stackoverflow.com/questions/2771171/control-the-pashed-border-stroke-length-and-distance-between-strokes) – secelite
Это также может помочь понять, как можно создать градиент dash + - http://stackoverflow.com/questions/32500570/gradient- line-with-pashed-pattern/32501799 # 32501799 (не уверен, что вы имели в виду пунктирную границу, созданную нами * * градиент или пунктирная граница * с градиентом) – Harry
Пунктирная граница, созданная с градиентом css, будет более точна в следующий раз, спасибо. – Rantiev