Можно ли создать границу в CSS3 так, чтобы они были округлены и пунктирны?
Я закругляю свои углы, но они кажутся сплошными:
border: 1px dotted gray;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-topleft: 30px 20px;
Остальная часть границы пунктирная, но углы твердые.
Я понимаю, что это специфично для Firefox, но сейчас это прекрасно.
Спасибо
Это ошибка в firefox.see this issue, mozilla не поддерживает округленный угол для пунктирной и пунктирной границы.
Да, теоретически вы можете иметь пунктирные и округленные границы, но, как вы видели, практически браузеры еще не поддерживают его.
Одним из решений является использование нескольких фоновых изображений. Этот подход можно использовать для указания другого background-image для четырех углов.
Вы также можете добавить пятое изображение для фонового изображения центра (при необходимости повторите).
Что-то вдоль линий...
.dashed-rounded-border {
border: 2px dashed blue;
background-image: url("top-left.png"), url("top-right.png"), url("bottom-right.png"), url("bottom-left.png"), url("center.png");
background-position: left top, right top, right bottom, left bottom, center center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
}
Мое решение для этой проблемы -
background: url('../images/dot.png');
background-size: 4px;
background-position: bottom left;
background-repeat: repeat-x;
убедитесь, что точечный образ - это только одна точка с некоторым белым пространством на стороне ее. После этого вы должны быть хорошими.
