使用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样式:
.div1{width:124px; height:63px; background-color:Green;padding:50px; margin-top: 0px; background-image: url('http://s16.sinaimg.cn/mw690/5a7775e3g7be081a976cf&690'); background-repeat: no-repeat;} .div2{width:100px;height:65px; padding:10px;background-color: rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F000000', endColorstr='#3F000000')} .div3{width:100px;height:64px; background-color:White;}
html代码:
<div class="div1"> <div class="div2"> <div class="div3"> </div> </div> </div>
转载于:https://www.cnblogs.com/xyyt/p/3477156.html
使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]相关推荐
- css加透明边框,CSS3实现透明边框的方法分享
我们在写项目的时候,经常性的会遇到弹出层的效果.UI的同学效果做的还挺漂亮的,类似截图如下 就是半透明的边框.汗,前端的同事想到的方案是 做个10*10的png24的半透明图片,然后作为背景平铺(让外 ...
- css 设置透明边框
想必大家都有这样的问题,我想设置一个透明的边框,为什么不行呢? 这就得谈到css3中的一个属性啦: background-clip.先看语法 在默认的的情况下北京会在方框内,如上图.若想绘制透明边框, ...
- grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器
grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器 时间:11-11-10所属栏目:前端效果 来源: james.padolsey.com 点击:470次 大小:0.04 MB 下 ...
- 透明水晶边框css,CSS揭秘——透明边框
当我们在实现透明边框的时候,会遇到一些问题.在阐述这些问题之前,首先看看什么是透明边框,总的来说,就如下图所示. 透明边框.png 众所周知的是,一旦给一个元素设置了背景之后,那么这个背景所包含的区域 ...
- CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...
- 完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列
锁定 表格的表头 和 列 终于 被我 写出来了,哇哈哈~~~~~~ , 心情大好.... 共享下 吧. 希望 看到的该文的 时候给予评价, 俗话说 吃水不忘挖井人啊. 要是朋友你 通过 ...
- 四种利用js导出Excel的方法(兼容IE6+、主流浏览器、支持复杂表头和合并单元格)
因为项目需求变更,最后决定使用做JS导出Excel,网上看了很多的帖子和例子,很多的例子并不能满足需求( 处理复杂表头,兼容主流浏览器,兼容IE等等).所以,自己找了几个比较不错的例子,在其基础上结合 ...
- 如何让边框滚动css,css-虚线边框滚动效果
经常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,而且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考. 基本HTMLcss 测试测试 Easy-way 经 ...
- CSS文本框边框发光效果
使用IE浏览器是看不到此效果的. 直接为全局input添加了这个CSS3效果 input[type=text]:focus,input[type=password]:focus,textarea:fo ...
- html的filter兼容性,网站黑白效果网站变灰色(兼容IE和主流浏览器)JS+CSS网站整站变黑白效果-css的 filter属性(Chrome内核)...
最新文章 https: open weixin qq com 有这个的账号,给客户开通微信小程序不需要认证费直... https: open weixin qq com 有这个的账号,给客户开通微信小 ...
最新文章
- 【怎样写代码】函数式编程 -- Lambda表达式(二):C#常用委托
- iOS UITest之加载其他应用
- python基础实例-Python基础之字符串常见操作经典实例详解
- Linux 操作 一批文件或者文件夹
- redis中几种数据存储方式的比较
- c语言设计 数组的知识点,C语言程序设计知识点及示例.pdf
- Capistrano3 与 Mina
- 父亲节,来认识一下这几位“爸爸”
- 使用Jackson解析JSON
- 基于深度学习的植物病害检测
- windows下MongoDB数据库的安装
- python调用curl_Python3模拟curl发送post请求操作示例
- 7-8 评委打分 (5 分)
- 如何恢复出厂设置并还原Apple Silicon M1 Mac?
- sqlserver两种分页方法比较
- python中字符串中文乱码_Python中文乱码的处理
- video标签实现多个视频循环播放
- 在wamp 或者xamp 下测试多个独立的网页文件
- 开源框架Volley的使用《一》
- 互联网最容易的搬砖项目,简直毫无技术含量!轻松月入过万