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

2019独角兽企业重金招聘Python工程师标准>>>

1、简单又好的 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;	}

 

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

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

3、如何用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; }

4、翻转图片：

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

5、Clearfix：

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

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

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

7、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" />

8、根据不同的文件类型，展示不同的链接：

/* 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、或者其他图标。
 9、边框圆角：

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

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

textarea{ 
	overflow:auto; 
	}

11、CSS透明度：

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

12、垂直居中：

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

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

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

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

14、打印分页符：

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

15、固定页脚位置：

#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');
	}

16、文字旋转：

.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);

	}

 

17、图片预加载功能：

.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;
	}

 

18、设计梯型文字：

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;
	}

转载于:https://my.oschina.net/u/1403184/blog/185798