自适应大小的透明圆角和边框效果！

HTML代码

        "">


    

    

        

圆角边框表格

        

这个页面演示了圆角边框表格的几种不同用法。为了创建你自己的圆角和边框样式，你可以修改相关CSS和图片。如果你要转载该页面，请注明出处，谢谢合作！

        

用法：

          1。把该页面的css拷贝到您的css里

          2。引用相关的js文件--

          〈script type="text/javascript" src="myfile/js/cb.js"〉〈/script〉

          3。修改图片并放到可以引用的位置。IE7和FF下均能显示PNG阴影图片的效果，IE6以下只能显示圆角和边框        

 

    

        

一个很简单的BOX，没什么特别的

        

这是一个最基本的样式的容器。使用了简单样式，而且没有使用定位和浮动，也不包含其他容器。

    

    
   

       
• 你也可以把一个列表放进这个容器。这是一个无序列表


       
• 第一个列表项目

       
• 第二个列表项目

   

   
   

       

这个容器包含了另一个容器

       

           

这个容器被另一个容器包含.

           

这样通常都会有问题.

       

       

但是现在你可以把容器放进其他容器，这样也不会有问题.

   

   
   

       

           

这是一个绝对定位的容器

           

它将会随着内容自动伸缩除了IE.

       

   

   
   

你也可以把这个技术应用到按钮上。这些浮动在左边而且可以自适应内容:

   

        这是按钮
        这个按钮更长一些

   

   

很不幸你需要为IE指定一个宽度如果它不能自动伸缩.

   
   

       

这个容器是浮动的

       

在IE6和以下它也能应用该样式。IE7支持PNG的ALPHA透明，当然FF也支持.

   

   
   

       

这个浮动的容器包含了另一个浮动容器

       

           

这个浮动容器被另一个浮动容器包含

           

就象你看到的一样，浮动也能包含浮动.

       

       

使这个容器浮动的CSS是以ID选择器来使用的，它说明如果一个ID属性存在，将会使得该容器获得新的样式.

   

   

   

乐里回的Blog  转自456bereastreet