CSS样式

1.Firefox专用样式
选中文字时显示红色背景与白色文字：

*::-moz-selection {
background-color:#FF3C00;
color:white;
}

圆角边

-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;


2.CSS 大背景

body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
/* CSS trick */
width: 100%;
display: table;
}


3.解决Firefox多图不显示问题
* { overflow: visible !important }

4.虚线

hr {
border-color:#D1D7DC;
border-style:dashed;
border-width:1px 0 0;
height:0;
margin:8px 0;
padding:0;
}

5.透明

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

6.省略号(Firefox不支持该CSS)

[css]overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
[/css]

jQuery 省略号插件

7.排除IE6以下版本使用
#div {   height/**/: 300px;}
html > body #div {      height: 300px;}

8.全窗口背景图片

html {        background: url(images/bg.jpg) no-repeat center center fixed;        -webkit-background-size: cover;        -moz-background-size: cover;        -o-background-size: cover;        background-size: cover;}

链接：Perfect Full Page Background Image

9.CSS拼图技术（CSS Sprites）

10.ipad专用CSS

@media only screen and (device-width: 768px) {  /* For general iPad layouts */} @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {  /* For portrait layouts only */} @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {  /* For landscape layouts only */}

11.换行 word-wrap : break-word;word-break : break-all
不换行：white-space:nowrap;
12.HACK IE浏览器

selector{
property:value; /* 所有浏览器 */
property:value9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}


链接:使用 YUI CSS

每位设计师都应该拥有的50个CSS代码片段

CSS Hack: 区分 IE6 / IE7 /IE8 /Firefox