Скругленные углы, используя 3 изображения

Question

Могу ли я объединить три изображения в одно с помощью CSS? По сути, мне нужно создать кнопку с закругленными углами, и у меня есть три изображения: левое, среднее и правое.

Я использовал на всех страницах, и я не смогу заменить его двумя или тремя другими элементами управления HTML. Так есть ли способ, которым я могу объединить эти изображения в одно и применить этот класс CSS к asp: button?

Пожалуйста, не предлагайте свойства пограничного радиуса, так как здесь важна обратная поддержка. Заранее спасибо

Answer 1

Чтение техники раздвижных дверей

http://www.alistapart.com/articles/slidingdoors/

http://www.alistapart.com/articles/slidingdoors2/

Для создания закругленных кнопок и многого другого, используя два скользящих изображения слева и справа.

Answer 2

Лучший способ - изменить HTML-код вашей кнопки. Что-то вроде этого работает хорошо:

<button><span>Click Me!</span></button>

Один из способов, который я могу придумать, - это вставить <span> в <button> с помощью javascript после загрузки страницы.

Тогда вы CSS, который вам понадобится для <button>, а <span> сделает фоновые изображения. Вам может не понадобиться 3 изображения, 2 должно быть достаточно, одно будет левым концом, например. и другой был бы действительно длинным правильным концом. Используя технику раздвижных дверей, вы можете сделать закругленный угол <button>

Вы могли бы даже сделать это с 1 изображением, спрайтом, содержащим два изображения, которые я упомянул выше.

Отличная статья: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/