使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示

对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于

这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不同,或根本就没有效果,

为了能在不同内核的浏览器之间显示效果一致,最好使用组合属性,即同时使用两个或以上。

 

下面,我们先熟悉下这几种属性,以及使用方式:


1. filter: alpha(opacity=50)——
 
    1.会使子元素透明。

    2.只针对针对所有IE浏览器及以Trident内核的诸如360浏览器,世界之窗浏览器等非IE浏览器有效。

2. filter:progid:DXImageTransform.Microsoft.gradient  (startColorstr='#3f000000',endColorstr='#3f000000')——

    1.不会使子元素透明。

   2.只针对针对所有IE浏览器及以Trident内核的诸如360浏览器,世界之窗浏览器等非IE浏览器有效。

3. opacity: 0.5——

    1.会使子元素透明。

    2.IE8以下版本及Trident内核的非IE浏览器均不支持,IE9以上及其他诸如火狐,谷歌极速等主流浏览器均支持。

4. background-color:rgba(255, 255, 255, 0.3)——

    1.不会使子元素透明。

   2.IE8以下版本及Trident内核的非IE浏览器均不支持,IE9以上及其他诸如火狐,谷歌极速等主流浏览器均支持。

     火狐浏览器支持,Webkit内核的诸如360极速浏览器,谷歌极速浏览器等都也支持。


使用技巧:

1. 鉴于上面属性的兼容性,如果不考虑元素的子元素,可以使用这个组合:

   {filter: alpha(opacity=50);background-color:rgba(255, 255, 255, 0.3) },


    第一个属性支持所有IE内核的浏览器,第二个元素支持其他主流的以火狐,谷歌极速等浏览器。

2. 如果要实现透明边框,子元素不透明,那么就要用这个组合:


   {filter:progid:DXImageTransform.Microsoft.gradient     (startColorstr='#3f000000',endColorstr='#3f000000');
    background-color:rgba(255, 255, 255, 0.3)},


但要注意这两个属性中的颜色,透明度一定要一致,这个兼容性最高,效果也最好。


关于“filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#3f000000',endColorstr='#3f000000')”的使用,请看下文:

FILTER:progid:DXImageTransform.Microsoft.Gradient使用

 

如示例中的代码如下:

CSS样式:



html代码:

posted on 2013-12-16 17:45  逍遥云天  阅读(4434)  评论(0编辑  收藏  举报

导航