Пользовательские пунктирной границы.

Question

Мне нужно сделать что-то вроде этого.

Я не могу использовать границу: пунктир или рамка: пунктир, потому что: 1) Результирующие точки и тире не точно такого же размера, как в примере, а расстояние не равно. 2) Округлые углы с пунктирными/пунктирными границами выглядят ужасно.

Конечно, есть пограничное изображение, но поддержка браузера невелика, мне нужна поддержка IE, по крайней мере для IE9. Итак, теперь я думаю о простом использовании старого метода со многими div и изображениями.

Каков наилучший способ сделать это, если у меня есть много таких коробок с разной шириной и высотой? Может быть, есть другой способ, кроме возиться с изображениями?

Answer 1

Один из способов борьбы с этим, как я думаю, вы указали, чтобы разбить его на два-три фоновых изображения.

Это позволяет использовать что-то вроде CSS3 Multiple Backgrounds.

Или старый метод Sliding Doors.

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