Simple Box

转载自:http://sperling.com/examples/box/

Note: this is a box with rounded corners. I have reviewed the available references and found similar solutions, but none that do it this way.

✓  This box was created by using eight very small gifs. One for each corner, and one for each side (total combined size of only 7.2 KB).

✓  This box automatically resizes height depending upon content. The width can be tied to the size of the viewport or set to a fixed size by changing the width value.

✓  This box can be made any size without any problems with graphics. In other words, you don't have to create a large graphic for this box to accommodate extra large sizes.

✓  This box is not affected by changes in text-zoom and holds its shape throughout all magnifications.

✓  The only known browsers that have problems with this technique are: Netscape 4.78 for Windows 2000, Netscape 4.8 for Linux, and Internet Explorer 4.0 for Window's 98.

✓  This box technique Validates under "HTML 4.01 Strict" and "W3C CSS".

✓  The technique looks fine (i.e., readable) without CSS.

✓  Here is the CSS file.

✓  Here is the HTM code.

✓  Here are the GIF's for the borders

posted @ 2011-06-07 09:12  刘理想  阅读(416)  评论(0编辑  收藏  举报