zoukankan      html  css  js  c++  java
  • 使用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代码:

  • 相关阅读:
    ubuntu下Nodic开发环境搭建
    usb_modeswitch移植
    STM32F4编程手册学习2_内存模型
    STM32F4 编程手册学习1_编程模型
    ARM架构中的程序执行与调用
    锲形文字 数字
    疑问
    lisp 题目
    面试官在面试时让我去破解一个软件,我成功了
    php CI ip限制
  • 原文地址:https://www.cnblogs.com/xyyt/p/3477156.html
Copyright © 2011-2022 走看看