【css】最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

IE8 最新css hack:

"\9" 例:"width:100px\9;".这里的"\9"可以区别所有IE6、IE7、IE8、IE9和FireFox.


"*" IE6、IE7可以识别.IE8、FireFox不能.


"_" IE6可以识别"_",IE7、IE8、FireFox不能.

在 CSS中常用特殊字符识别表: 


(1) *:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;


(2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important;


(3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_;


(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)

【css】漂亮的css字体样式

案例一:

{

color:#000000;
font-family:”微软雅黑”,”黑体”;
font-size:28px;
line-height:34px;
text-shadow:1px 1px 1px #999999;

}

案例二:

<div>
   <h2><a href=”#”>军事热点</a></h2>
</div>

.mod_s .hd {
background-image:url(“http://i2.sinaimg.cn/jc/blog/images/mil_box_yh_01.png”);
color:#FFFFFF;
font-family:”微软雅黑”,”黑体”,”宋体”;
font-size:16px;
height:36px;
line-height:36px;
}
.mod_s .hd h2 {
color:#FFFFFF;
font-family:”微软雅黑”,”黑体”,”宋体”;
font-size:16px;
line-height:36px;
padding:0;
text-align:left;
text-shadow:1px 1px 1px #006600, -1px -1px 1px #006600;
width:auto;
}

【css】CSS 鼠标样式

CSS鼠标样式语法如下:

任意标签中插入 style=”cursor:*”

text是移动到文本上的那种效果 
wait是等待的那种效果 
default是默认效果 
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果

【css】图片加边框 – 动态效果

html代码:

<a href=”blog.cangbaoge168.com” ><img src=”http://blog.jhonse.com/wp-content/themes/forigi1.0/images/logo.gif” /></a>

css代码:

a img{
width: 240px;
height: 240px;
padding: 2px;
border: 1px solid #CCC;
margin: 2px 6px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

a img:hover{
-webkit-box-shadow: inset 300px 300px 3px #222;
-moz-box-shadow: inset 300px 300px 3px #222;
box-shadow: inset 300px 300px 3px #222;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.8;
}

效果: