Как добиться этого эффекта границы кнопок с помощью CSS? (изображение включено)

Question

Прямо сейчас наши макеты / демонстрационные версии используют изображения для достижения этого эффекта (включая текст кнопки). Это менее чем желательно по всем стандартным причинам. Я могу заставить все работать, кроме этой противной внешней границы. Я бы очень хотел не добавлять в свой документ разметку, просто чтобы иметь это.

У меня есть мой тестовый код на jsfiddle, хотя он там не работает так же хорошо, как на моей локальной машине: http://jsfiddle.net/Axtjm/

tldr: как добавить такую ​​вставку и сохранить закругленные углы без дополнительной разметки.

Answer 1

Как бы не интуитивно это не звучало, не используйте outline для контуров. Используйте box-shadow с 1px спредом:

box-shadow: 0px 0px 1px 1px #049ED9;

Демо: http://jsfiddle.net/Axtjm/4/

Answer 2

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

Но задача в том, чтобы сделать это без границы.Некоторые идеи:

• используйте границу, а затем очень тонкую коробку-тень.
• использовать атрибут стиля границы И атрибут стиля контура

(оба зависят от поддерживаемого ими браузера)

Quick JSBIN demo: http://jsbin.com/irabul

Answer 3

используется свойство border-radius CSS3 и простые методы CSS-границ,

некоторые свойства границы

solid   Specifies a solid border  
double  Specifies a double border  
groove  Specifies a 3D grooved border. The effect depends on the border-color value  
ridge   Specifies a 3D ridged border. The effect depends on the border-color value  
inset   Specifies a 3D inset border. The effect depends on the border-color value  
outset  Specifies a 3D outset border. The effect depends on the border-color value  
inherit     Specifies that the border style should be inherited from the parent element

, а здесь подробно описан радиус границы

http://www.css3.info/preview/rounded-border/

Answer 4

Используйте вставку box-shadow.Если вы уже используете box-shadow на своих кнопках, помните, что вы можете сложить box-shadows, используя запятые для разделения каждого из них.

button {
 border: 1px solid #369;
 box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}

Выше приведен только пример;замените значения своими собственными, если это необходимо.Если вам нужна более смелая вставная тень, вы также можете сложить две вставки одинакового значения, чтобы добиться этого.

Живой пример: http://jsfiddle.net/Axtjm/5/