开发者

Rounded Corners using 3 images

开发者 https://www.devze.com 2023-01-15 16:10 出处:网络
Can I club together three images to form a one with CSS? Basically, I need to create rounded corner button and I\'ve three images left, middle and right.

Can I club together three images to form a one with CSS? Basically, I need to create rounded corner button and I've three images left, middle and right.

I've used in all the pages and it won't be possible for me to replace it with two or three other HTML controls. So is there any way by which I can combine these images to form one and apply that CSS class to asp:button?

Please don't suggest for border-rad开发者_如何学JAVAius properties as backward support is important here. Thanks in advance


Read Sliding door technique

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

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

To create rounded buttons and a lot more using two sliding images from left and right.


The best way would be to modify the HTML for your button. Something like this works well:

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

One way I can think of is to inject the <span> into the <button> with javascript after the page has loaded.

Then you CSS that you will need for the <button> and the <span> will do the background images. You may not need 3 images, 2 should suffice, one would be the left end for eg. and another would be a really long right end. Using the sliding doors technique you can make a rounded corner <button>

You could even do this with 1 image, a sprite containing the two images I mentioned above.

This article is excellent: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

0

精彩评论

暂无评论...
验证码 换一张
取 消