tailieunhanh - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P18:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | CSS Positioning and Layout 317 The markup for this example is as follows. The top-left and bottom-left images are included in the document itself within top and bottom divs chapter09 DOCTYPE html PUBLIC - W3C DTD XHTML Strict EN http TR xhtml1 DTD html xmlns http 1999 xhtml lang en-US head title Rounded corners title meta http-equiv Content-Type content text html charset utf-8 link rel stylesheet type text css href head body div class rndbox div class rndtop img src alt width 30 height 30 div p Lorem ipsum dolor sit amet consectetuer adipiscing p div class rndbottom img src alt width 30 height 30 div div body html The top-right and bottom-right images are included as background images in the CSS for the divs with the classes rndtop and rndbottom chapter09 excerpt .rndbox background C6D9EA width 300px font Verdana Arial Helvetica sans-serif color 000033 .rndtop background url no-repeat right top .rndbottom background url no-repeat right top .rndbottom img Download at 318 The CSS Anthology display block .rndbox p margin 0 0 Together the images markup and CSS create a curved box like the one shown in Figure . Lorem ipsum dolor sit amet consectetuer adipiscing Figure . A curved box created by using markup and images Solution 3 Using JavaScript Adding markup and images to your code can be an unattractive option especially if you have a lot of boxes requiring rounded corners. To deal with this problem many people have come up with solutions that use JavaScript to add the rounded corners to otherwise square boxes. The beauty of this is that even if users have JavaScript disabled they see a perfectly usable site it merely lacks the additional style of the curved edges. Various methods have been devised to achieve rounded corners using JavaScript but here we ll look at just one NiftyCube as it s .