Я просто использую для этого простой код CSS:
button {
border: 1px dotted #bebebe;
background: #eeeeee;
font-size: 20px;
color: black;
padding: 7px;
border-radius: 4px;
}
Но пунктирная граница не отображается слева:
Что я делаю не так?
ИЗМЕНИТЬ:
Ну, для всех, у кого есть эта проблема, речь идет о навигаторе, который вы используете, и о масштабировании. Не знаю почему, но у некоторых кнопок граница видна со всех сторон, а у некоторых нет.
margin-left 30.06.2013 28.0 30.06.2013 В браузерах есть ошибки при отображении пунктирных границ шириной в один пиксель, см., например. в отчете об ошибках Mozilla закругленные углы с точками/штрихом отображаются сплошными, Отчет об ошибке Chromium Еще одна ошибка границы: пунктирная линия на полпути становится сплошной< /а>. Похоже, вы вызвали одну из таких ошибок в Chrome. Тестируя ваш jdsfiddle в Chrome 28beta на Win 7, я вижу, что левая граница сплошная, а нижняя граница сплошная в левой половине. (Это немного сложно увидеть, но это становится более заметным, если вы сделаете снимок экрана и увеличите его или, например, установите красный цвет границы.)
Боюсь, будет сложно найти приемлемое обходное решение. В этом конкретном случае ошибка исчезнет, если вы уберете скругление углов (чего вы, вероятно, не хотите делать) или установите ширину границы в 2 пикселя.
Пунктирную границу в 1 пиксель очень трудно увидеть. Если вы увеличите Cntrl + +, я думаю, вы увидите, что на самом деле есть пунктирная рамка.
Кроме того, изменение 1px на 2px : border: 2px dotted #bebebe; также показывает, что граница присутствует.
EDIT: удалите border-radius: 4px;, и вы увидите пунктирную рамку.
