凹刻感2px分割线css代码实现(兼容IE6-9,火狐,谷歌等)

效果:

css:

hr {
    width: 95%;
    border: 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #fff;
    filter: Alpha(Opacity=30);/*IE*/
    opacity: 0.3;/*火狐*/
}

原理:<hr />标签默认由border-top和border-bottom组成,通过设置border-top深色,border-bottom浅色,然后使用透明度来与背景色相融实现凹刻效果。

时间: 2024-08-03 21:44:23

凹刻感2px分割线css代码实现(兼容IE6-9,火狐,谷歌等)的相关文章

网页制作常见的问题(怎样兼容IE6/IE7/火狐浏览器)

1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="text/css"> body {margin:0} div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; } </style> 因为加上浮动后就会多出一倍的边距,浮动

网页制作常见的面试题(怎样兼容IE6/IE7/火狐浏览器)

1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG例如:<style type="text/css">body {margin:0}div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; }</style>因为加上浮动后就会多出一倍的边距,浮动后本来外边距

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法(非原创)

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

{转}div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi

CSS失效网页乱码原因兼容问题-手写CSS代码注意什么

我们在写html代码和css 代码应该注意些什么,这节我们讲解大小写与编码问题.(体感音乐) 乱码VS编码前面我们介绍过导致网页乱码.CSS失效等原因一部分是由于自己编写的时候没有注意编码问题,不编码转化问题,常常因为自己写的时候使用一种编码,发现别人比较好的DIV+CSS片段比较好直接就复制过来用,结果别人编码与自己编码不符合从而造成网页在IE中呈现乱码,或CSS失效(CSS声明).解决办法使用软件中编码转化功能进行网页代码转化.如使用Dreamweaver中功能转化编码.-了解语言编码cha

兼容IE6浏览器的最大高度和最小高度css代码

兼容IE6浏览器的最大高度和最小高度css代码:IE6浏览器是不支持最大高度和最小高度属性的,下面就通过兼容性措施实现此功能.一.最大高度效果: .max_height{ max-height:400px; _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); } 二.最小高度效果: .min_height{ min-height:200px; _height:expression(th

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码

CSS实现的兼容所有浏览器的div悬浮在网页一侧的代码:固定悬浮在网页一侧的效果应用非常的频繁,尤其是客服系统或者公告系统,CSS提供了position:fixed属性即可实现此功能,但是IE6浏览器并不支持,虽然IE6的用户越来越少,但是毕竟还是有用户在使用,所以最好还是要实现兼容效果,下面就是一段能够兼容所有浏览器的代码实例,希望能够给需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律

http://www.cnblogs.com/lhb25/archive/2010/06/19/1760786.html   原始网页 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧. 理解 CSS 盒子模型 如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理

网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大家查看,特整理下出个网站变灰色/黑白色代码方法的大集合以供大家参考与使用,为了方便站点哀悼,提供下面的css滤镜代码,以表哀悼.以下为全站CSS代码. 方法一:推荐用这个,浏览器兼容较好,只需把代码放到CSS文件最上面即可. html { filter: grayscale(100%); -webk