强大的CSS代码(Blockquote、CSS三角、Clearfix、iPad css、圆角、图片预

一、简单又好的 Blockquote 样式:

blockquote{
	background:#f9f9f9;
	border-left:10px solid #ccc;
	margin:1.5em 10px;
	padding:.5em 10px;
	quotes:"\201C""\201D""\2018""\2019";
	}
blockquote:before{
	color:#ccc;
	content:open-quote;
	font-size:4em;
	line-height:.1em;
	margin-right:.25em;
	vertical-align:-.4em;
	}
blockquote p{
	display:inline;	}

 

二、图像在水平或者垂直方向的绝对定位：

img{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 500px;
	margin-top: -250px; /* Half the height */
	margin-left: -250px; /* Half the width */
	}

三、如何用css实现小三角形符号：

.arrow-up{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .arrow-down{ width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; } .arrow-right{ width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; } .arrow-left{ width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid blue; }

四、翻转图片：

img{ -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

五、Clearfix：

.clearfix:before,.clearfix:after{
	content:"";display:table;
	}
.clearfix:after{
	clear:both;
	}
.clearfix{
	zoom:1;
	}

六、隐藏和文本文字缩进：

h1{
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
	}

七、iPad引入CSS代码：

如下代码回到页面的head中，路径必定要正确，引用的时候记得要加<>。portrait是竖屏，landscape横屏。<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="pad_portrait.css" /> <link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="pad_landscape.css" />

八、根据不一样的文件类型，展现不一样的连接：

/* external links */
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
	}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
	}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
	}

此代码段常常被用来增长用户体验的。常常在互联网上咱们发现一些连接移动到上面的时候会显示不一样的小图标。可使用此代码段，你告诉用户是否它一个外部连接、 电子邮件、 pdf、或者其余图标。
 九、边框圆角：

.round{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
	}

十、去除textarea在IE中的滚动条：

textarea{ 
	overflow:auto; 
	}

十一、CSS透明度：

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

十二、垂直居中：

.container{
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
	}

1三、Min-height in IE（IE的最小高度）：

这是为了兼容IE而设置的IE最小高，注意三个属性的顺序不能错乱。

.box{
	min-height:500px;   /*标准浏览器能够设置最小高*/
	height:auto!important;  
	height:500px;   /*IE非标准浏览器适用*/
	}

1四、打印分页符：

.page-break{
	page-break-before:always;
	}

1五、固定页脚位置：

#footer{
	position:fixed;
	left:0px;
	bottom:0px;
	height:32px;
	width:100%;
	background:#333;
	}
/* IE 6 */
* 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');
	}

1六、文字旋转：

.rotate {

/* Safari */
	-webkit-transform: rotate(-90deg);

/* Firefox */
	-moz-transform: rotate(-90deg);

/* IE */
	-ms-transform: rotate(-90deg);

/* Opera */
	-o-transform: rotate(-90deg);

/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

	}

 

1七、图片预加载功能：

.loader{
	background:url(images/hover.gif) no-reoeat;
	background:url(images/hover2.gif) no-reoeat;
	background:url(images/hover3.gif) no-reoeat;
	margin-left:-10000px;
	}

 

1八、设计梯型文字：

h1{
	font-size: 72px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}