I am currently working on a Drupal 6 theme, for which designer is explicitly requesting to use A LOT of rounded corners.
I could of course create the rounded corners - traditionally - with images. But I know there must be also better and easier ways of creating rounded corners.
Optimally, I would like to write my CSS as standards-compliant CSS3, with selectors like:
h2 {border-radius: 8px;}
Use of browser-specific is CSS is very OK also, like
h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
If required, I can also insert some custom JavaScript by hand. I just want to avoid adding yet another 100 rounded corner images to my markup.
Any suggestions on the best approach?
Define a class like "roundy-corner" and use the jQuery corner plugin like so:
$('.roundy-corner').corner();
You will need the jQuery roundy corner plugin:
http://www.malsup.com/jquery/corner/
I like to use JavaScript here because it doesn't require any additional markup in the source document; the script will insert placeholder elements as needed. Also, in the far, far future when we all have flying cars and IE supports border-radius, you can replace it with pure CSS.
Some Drupal-specific notes to use the suggested rounded corners plugin:
- Download jquery.corner.js and put it to your Drupal installation's scripts folder. Make sure to set the file permissions correctly.
- Load the script in your (Zen) theme by adding the following line to template.php:
drupal_add_js('scripts/jquery.corner.js');
- Assign rounded corners to any part of the page by adding styling commands again to template.php. Note that you need to hook them with drupal_add_js method. For instance:
drupal_add_js( "$(document).ready(function() { $('#primary a').corner('top round 4px'); $('.block-inner h2.title').corner('top round 4px'); });", 'inline' );
That's it!!! Beautiful rounded corners with no images!
来源:https://stackoverflow.com/questions/2310833/what-is-the-best-way-to-create-standards-based-cross-browser-compatible-rounded