強大的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;
	}