1.垂直对齐
.vc{
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
2.只在一侧或者两侧具有投影
.box-shadow{
background-color:#AC92EC;
160px;
height:90px;
margin-top:-45px;
margin-left:-80px;
position:absolute;
top:50%;
left:50%;
}
.box-shadow:after{
content:"";
150px;
height:1px;
margin-top:88px;
margin-left:-75px;
display:block;
position:absolute;
left:50%;
z-index:-1;
-webkit-box-shadow:0px0px8px2px#000000;
-moz-box-shadow:0px0px8px2px#000000;
box-shadow:0px0px8px2px#000000;
}
3.渐变背景动画效果
button{
padding:15px;
background-image:linear-gradient(#FC6E51,#FFF);
background-size:auto200%;
background-position:0100%;
transition:background-position0.5s;
}
button:hover{
background-position:00;
}
4.将文本分成多列
div
{
-moz-column-count:3;/*Firefox*/
-webkit-column-count:3;/*SafariandChrome*/
column-count:3;
}
5.表格自动宽度
td{
white-space:nowrap;
}
6.像出版物一样，第一个字变得大些
p:first-child::first-letter{
font-family:"papyrus";
font-size:28px;
font-weight:bold;
}
7.特定浏览器的CSSHacks的完整列表
有时候解决跨浏览器兼容性可能会非常的棘手，但这些特定浏览器的技巧可能会帮你解决问题。
/*****SelectorHacks******/
/*IE6andbelow*/
*html#uno{color:red}
/*IE7*/
*:first-child+html#dos{color:red}
/*IE7,FF,Saf,Opera*/
html>body#tres{color:red}
/*IE8,FF,Saf,Opera(EverythingbutIE6,7)*/
html>/**/body#cuatro{color:red}
/*Opera9.27andbelow,safari2*/
html:first-child#cinco{color:red}
/*Safari2-3*/
html[xmlns*=""]body:last-child#seis{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:nth-of-type(1)#siete{color:red}
/*safari3+,chrome1+,opera9+,ff3.5+*/
body:first-of-type#ocho{color:red}
/*saf3+,chrome1+*/
@mediascreenand(-webkit-min-device-pixel-ratio:0){
#diez{color:red}
}
/*iPhone/mobilewebkit*/
@mediascreenand(max-device-480px){
#veintiseis{color:red}
}
/*Safari2-3.1*/
html[xmlns*=""]:root#trece{color:red}
/*Safari2-3.1,Opera9.25*/
*|html[xmlns*=""]#catorce{color:red}
/*EverythingbutIE6-8*/
:root*>#quince{color:red}
/*IE7*/
*+html#dieciocho{color:red}
/*Firefoxonly.1+*/
#veinticuatro,x:-moz-any-link{color:red}
/*Firefox3.0+*/
#veinticinco,x:-moz-any-link,x:default{color:red}
/*****AttributeHacks******/
/*IE6*/
#once{_color:blue}
/*IE6,IE7*/
#doce{*color:blue;/*or#color:blue*/}
/*EverythingbutIE6*/
#diecisiete{color/**/:blue}
/*IE6,IE7,IE8*/
#diecinueve{color:blue9;}
/*IE7,IE8*/
#veinte{color/***/:blue9;}
/*IE6,IE7--actsasan!important*/
#veintesiete{color:blue!ie;}/*stringafter!canbeanything*/
8.创建模糊文本
.blurry-text{
color:transparent;
text-shadow:005pxrgba(0,0,0,0.5);
}
9.不使用表格实现跨浏览器垂直水平居中图片
这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片，这是IE的一个hack：
<figureclass='logo'>
<span></span>
<imgclass='photo'/>
</figure>
.logo{
display:block;
text-align:center;
display:block;
text-align:center;
vertical-align:middle;
border:4pxsolid#dddddd;
padding:4px;
height:74px;
74px;}
.logo*{
display:inline-block;
height:100%;
vertical-align:middle;}
.logo.photo{
height:auto;
auto;
max-100%;
max-height:100%;}
10.高亮选中的input
//HTML
<inputid="mycheck1"type="checkbox"/>
<labelfor="mycheck1">Checkboxlabelhere</label>
<br/>
<inputid="mycheck2"type="checkbox"checked/>
<labelfor="mycheck2">Checkboxlabelhere</label>
<br/>
<inputid="mycheck3"type="checkbox"/>
<labelfor="mycheck3">Checkboxlabelhere</label>
//CSS
input:checked+label{
background:yellow;
}
11.跨浏览器透明度
selector{
filter:alpha(opacity=50);/*internetexplorer*/
-khtml-opacity:0.5;/*khtml,oldsafari*/
-moz-opacity:0.5;/*mozilla,netscape*/
opacity:0.5;/*fx,safari,opera*/
}
12.CSS投影
//外投影
.shadow{
-moz-box-shadow:5px5px5px#ccc;
-webkit-box-shadow:5px5px5px#ccc;
box-shadow:5px5px5px#ccc;
}
//内投影
.shadow{
-moz-box-shadow:inset0010px#000000;
-webkit-box-shadow:inset0010px#000000;
box-shadow:inset0010px#000000;
}
13.跨浏览器最小高度
#div{
min-height:500px;
height:auto!important;
height:500px;
}
14.固定Footer
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
100%;
background:#999;
}
/*IE6*/
*html#footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop))+'px');
}
15.清除浮动Clearfix
/*slightlyenhanced,universalclearfixhack*/
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:"";
clear:both;
height:0;
}
.clearfix{display:inline-block;}
/*startcommentedbackslashhack*/
*html.clearfix{height:1%;}
.clearfix{display:block;}
/*closecommentedbackslashhack*/
16.给可点击元素添加手型光标
a[href],input[type='submit'],input[type='image'],label[for],select,button,.pointer{
cursor:pointer;
}
17.iPad定向CSS
<!--css-->
@mediaonlyscreenand(max-device-1024px)and(orientation:portrait){
.landscape{display:none;}
}
@mediaonlyscreenand(max-device-1024px)and(orientation:landscape){
.portrait{display:none;}
}
<!--examplemarkup-->
<h1class="portrait">Yourdeviceorientationis"portrait"<h1>
<h1class="landscape">Yourdeviceorientationis"landscape"<h1>
18.Pre标签内文本换行
pre{
height:120px;
overflow:auto;
font-family:“Consolas”,monospace;
font-size:9pt;
text-align:left;
background-color:#FCF7EC;
overflow-x:auto;/*Usehorizontalscrollerifneeded;forFirefox2,not
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap!important;/*Mozilla,since1999*/
word-wrap:break-word;/*InternetExplorer5.5+*/
margin:0px0px0px0px;
padding:5px5px3px5px;
white-space:normal;/*crucialforIE6,maybe7?*/
}
19.CSS3媒体查询
/*Smartphones(portraitandlandscape)-----------*/
@mediaonlyscreen
and(min-device-320px)
and(max-device-480px){
/*Styles*/
}
/*Smartphones(landscape)-----------*/
@mediaonlyscreen
and(min-321px){
/*Styles*/
}
/*Smartphones(portrait)-----------*/
@mediaonlyscreen
and(max-320px){
/*Styles*/
}
/*iPads(portraitandlandscape)-----------*/
@mediaonlyscreen
and(min-device-768px)
and(max-device-1024px){
/*Styles*/
}
/*iPads(landscape)-----------*/
@mediaonlyscreen
and(min-device-768px)
and(max-device-1024px)
and(orientation:landscape){
/*Styles*/
}
/*iPads(portrait)-----------*/
@mediaonlyscreen
and(min-device-768px)
and(max-device-1024px)
and(orientation:portrait){
/*Styles*/
}
/*Desktopsandlaptops-----------*/
@mediaonlyscreen
and(min-1224px){
/*Styles*/
}
/*Largescreens-----------*/
@mediaonlyscreen
and(min-1824px){
/*Styles*/
}
/*iPhone4-----------*/
@media
onlyscreenand(-webkit-min-device-pixel-ratio:1.5),
onlyscreenand(min-device-pixel-ratio:1.5){
/*Styles*/
}
20.重置加载
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
/*remembertodefinefocusstyles!*/
:focus{
outline:0;
}
body{
line-height:1;
color:black;
background:white;
}
ol,ul{
list-style:none;
}
/*tablesstillneed'cellspacing="0"'inthemarkup*/
table{
border-collapse:separate;
border-spacing:0;
}
caption,th,td{
text-align:left;
font-weight:normal;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:"";
}
blockquote,q{
quotes:"""";
}
21.多边框
元素必须是相对定位，且具有足够的padding来显示多余的边框：
#borders{
position:relative;
z-index:1;
padding:30px;
border:5pxsolid#f00;
background:#ff9600;
}
#borders:before{
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5pxsolid#ffea00;
background:#4aa929;
}
#borders:after{
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5pxsolid#00b4ff;
background:#fff;
}
22.移除IE中textarea的滚动条
textarea{overflow:auto;}
23.简单但好看的引用样式
blockquote{
background:#f9f9f9;
border-left:10pxsolid#ccc;
margin:1.5em10px;
padding:.5em10px;
quotes:"201C""201D""2018""2019";
}
blockquote:before{
color:#ccc;
contentundefinedpen-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquotep{
display:inline;
}
24.:-moz-placeholder
<!doctypehtml>
<html>
<head>
<title>undefinedlaceholderdemo</title>
<styletype="text/css">
input:-moz-placeholder{
color:**en;
}
</style>
</head>
<body>
<inputid="test"placeholder="undefinedlaceholdertext!">
</body>
</html>
25.另一种固定footer的方式
*{margin:0;padding:0;}
html,body,#wrap{height:100%;}
body>#wrap{height:auto;min-height:100%;}
#main{padding-bottom:150px;}/*mustbesameheightasthefooter*/
#footer{
position:relative;
margin-top:-150px;/*negativevalueoffooterheight*/
height:150px;
clear:both;}
/*CLEARFIX*/
.clearfix:after{content:".";
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix{display:inline-block;}
/*HidesfromIE-mac*/
*html.clearfix{height:1%;}
.clearfix{display:block;}
/*EndhidefromIE-mac*/
<divid="wrap">
<divid="main"class="clearfix">
</div>
</div>
<divid="footer">
</div>
26.背景透明
.rgba{
background-color:transparent;
background-color:rgba(200,200,200,0.8);
filter:progidundefinedXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter:"progidundefinedXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}
27.居中未知宽度的DIV元素
.content{
margin:0auto8px;
display:table;
}
.contentdiv{
display:table-cell;
}
<!--[ifIE]>
.content{
display:block;
text-align:center;
}
.contentdiv{
display:inline;
zoom:1;
}
<![endif]-->
28.根据文件类型设置样式
/*externallinks*/
a[href^="http://"]
{
padding-right:13px;
background:url(external.gif)no-repeatcenterright;
}
/*emails*/
a[href^="mailto:"]
{
padding-right:20px;
background:url(email.png)no-repeatcenterright;
}
/*pdfs*/
a[href$=".pdf"]
{
padding-right:18px;
background:url(acrobat.png)no-repeatcenterright;
}
29.解决IE6/7双倍margin/padding问题
ulli
{
float:right;
margin-right:10px;
*display:inline;/*TargetIE7andbellow*/
_display:inline;/*TargetIE6andbellow*/
}
/*Thi**amplefixesthedoublerightmarginbug*/
30.更改选中文本的样式
::selection
{
color:white;
background-color:red;
}
::-moz-selection/*Firefoxneedsanextraattentionforthis*/
{
color:white;
background-color:red;
}
31.首字下沉
p:first-letter{
display:block;
margin:5px005px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}