前端开发HTML,CSS,JS中的奇技淫巧

最新推荐文章于 2025-05-25 07:23:59 发布

原创最新推荐文章于 2025-05-25 07:23:59 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #webkit #浏览器 #Firefox

XHTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

本文分享了前端开发中实用的小技巧，包括实现PNG24图片半透明效果、CSS hack兼容性写法、创建半透明遮罩层、清除浮动及实现圆角的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要收藏和自己摸索一些经常会用到又记得不太清楚的小方法小技巧，以便不时之需。
这些奇伎淫巧会不断迭代增加和更新。

1、在IE6浏览器下使用CSS滤镜使PNG24背景图片实现半透明效果
.ooxx{
background-image:url(../images/a.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=”images/a.png” );
}

2、CSS hack

#test{
color:red; 所有浏览器都支持
color:red !important;Firefox、IE7支持
_color:red; IE6支持
*color:red; IE6、IE7支持
*+color:red; IE7支持
color:red\9; IE6、IE7、IE8支持
color:red\0; IE8支持
}

3、半透明全屏遮罩层样式

#mask{position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;background-color:#000;-moz-opacity:0.2;opacity:.20;filter:alpha(opacity=20);
_position:absolute;_height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);}

4、CSS清浮动

.ooxx{zoom:1;}

.ooxx{content:”\0020″;display:block;height:0;clear:both;}

5、CSS兼容标准浏览器的圆角

.ooxx{ border:1px solid #AEAEAE; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}