今天介绍给大家我收藏的25个非常有用的CSS代码片段，在你开发基于CSS的网站时，这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS透明度，梯形环绕，CSS小三角等，希望对你有用
1简单又好的 Blockquote 样式
CSS代码如下
1 blockquote { 2 background:#f9f9f9; 3 border-left:10px solid #ccc; 4 margin:1.5em 10px; 5 padding:.5em 10px; 6 quotes:"\201C""\201D""\2018""\2019"; 7 } 8 blockquote:before { 9 color:#ccc; 10 content:open-quote; 11 font-size:4em; 12 line-height:.1em; 13 margin-right:.25em; 14 vertical-align:-.4em; 15 } 16 blockquote p { 17 display:inline; 18 }
2图像在水平或者垂直方向的绝对定位
css代码
1 img { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 width: 500px; 6 height: 500px; 7 margin-top: -250px; /* Half the height */ 8 margin-left: -250px; /* Half the width */ 9 }
3用PHP压缩CSS代码
1 <?php 2 ob_start ("ob_gzhandler"); 3 header("Content-type: text/css; charset: UTF-8"); 4 header("Cache-Control: must-revalidate"); 5 $offset = 60 * 60 ; 6 $ExpStr = "Expires: " . 7 gmdate("D, d M Y H:i:s", 8 time() + $offset) . " GMT"; 9 header($ExpStr); 10 ?> 11 12 body { color: red; }
4如何用css实现小三角形符号
具体代码如下 首先是html代码
1 <div class="arrow-up"></div> 2 <div class="arrow-down"></div> 3 <div class="arrow-left"></div> 4 <div class="arrow-right"></div>
css代码
1 .arrow-up { 2 0; 3 height: 0; 4 border-left: 5px solid transparent; 5 border-right: 5px solid transparent; 6 7 border-bottom: 5px solid black; 8 } 9 10 .arrow-down { 11 0; 12 height: 0; 13 border-left: 20px solid transparent; 14 border-right: 20px solid transparent; 15 16 border-top: 20px solid #f00;
17 } 18 19 .arrow-right { 20 0; 21 height: 0; 22 border-top: 60px solid transparent; 23 border-bottom: 60px solid transparent; 24 25 border-left: 60px solid green; 26 } 27 28 .arrow-left { 29 0; 30 height: 0; 31 border-top: 10px solid transparent; 32 border-bottom: 10px solid transparent; 33 34 border-right:10px solid blue; 35 }
5.翻转图片
CSS代码
1 img { 2 -moz-transform: scaleX(-1); 3 -o-transform: scaleX(-1); 4 -webkit-transform: scaleX(-1); 5 transform: scaleX(-1); 6 filter: FlipH; 7 -ms-filter: "FlipH"; 8 }
用这些代码可以实现图像的360的翻转，效果如下，没有翻转前的图片
翻转后的图片
6 Clearfix
1 .clearfix:after { 2 visibility: hidden; 3 display: block; 4 font-size: 0; 5 content: " "; 6 clear: both; 7 height: 0; 8 } 9 10 .clearfix { display: inline-block; } 11 12 /* start commented backslash hack \*/ 13 * html .clearfix { height: 1%; } 14 .clearfix { display: block; } 15 /* close commented backslash hack */
7 在IE6中的固定定位
8 隐藏和文本文字缩进
1 h1 { 2 text-indent:-9999px; 3 margin:0 auto; 4 400px; 5 height:100px; 6 background:transparent url("images/logo.jpg") no-repeat scroll; 7 }
上面CSS代码设置text-indent 为负值，正好文字移到了左边，可以实现部分文字隐藏
9在iPad当中定位CSS代码
10根据不同的文件类型，展示不同的链接，看下面的代码
1 /* external links */ 2 a[href^="http://"]{ 3 padding-right: 20px; 4 background: url(external.gif) no-repeat center right; 5 } 6 7 /* emails */ 8 a[href^="mailto:"]{ 9 padding-right: 20px; 10 background: url(email.png) no-repeat center right; 11 } 12 13 /* pdfs */ 14 a[href$=".pdf"]{ 15 padding-right: 20px; 16 background: url(pdf.png) no-repeat center right; 17 }
此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段，你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标
11 边框圆角
1 .round{ 2 -moz-border-radius: 10px; 3 -webkit-border-radius: 10px; 4 border-radius: 10px; /* future proofing */ 5 -khtml-border-radius: 10px; /* for old Konqueror browsers */ 6 }
12 去除textarea在IE当中的滚动条效果
textarea{
overflow:auto;
}
13 使页面在中央
1 .wrapper { 2 960px; 3 margin:0 auto; 4 }
14 CSS文字阴影效果
1 p { text-shadow: 1px 1px 1px #000; }
15 CSS透明度
一谈到透明度问题，这个真是令人头疼，明明在火狐和谷歌浏览器当中效果看到好好的，在IE当中浏览就变了味，好在可以通过下面的CSS代码解决
1 .transparent { 2 filter:alpha(opacity=50); 3 -moz-opacity:0.5; 4 -khtml-opacity: 0.5; 5 opacity: 0.5; 6 }
16 垂直居中
1 .container { 2 min-height: 10em; 3 display: table-cell; 4 vertical-align: middle; 5 }
17 Min-height in IE
1 .box { 2 min-height:500px; 3 height:auto !important; 4 height:500px; 5 }
18 使gif图像可以来回蹦跳
19 打印分页符
1 .page-break{ 2 page-break-before:always; 3 }
20 固定页脚位置
1 #footer { 2 position:fixed; 3 left:0px; 4 bottom:0px; 5 height:32px; 6 100%; 7 background:#333; 8 } 9 /* IE 6 */ 10 * html #footer { 11 position:absolute; 12 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'); 13 }
21 文字旋转
1 .rotate { 2 3 /* Safari */ 4 -webkit-transform: rotate(-90deg); 5 6 /* Firefox */ 7 -moz-transform: rotate(-90deg); 8 9 /* IE */ 10 -ms-transform: rotate(-90deg); 11 12 /* Opera */ 13 -o-transform: rotate(-90deg); 14 15 /* Internet Explorer */ 16 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 17 18 }
22 A链接伪类（按顺序）
CSS代码
1 a:link {color: blue;} 2 a:visited {color: purple;} 3 a:hover {color: red;} 4 a:active {color: yellow;}
23 设置ul阴影效果和边框圆角
CSS代码如下
1 ul.box { 2 position: relative; 3 z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 4 overflow: hidden; 5 list-style: none; 6 margin: 0; 7 padding: 0; } 8 9 ul.box li { 10 position: relative; 11 float: left; 12 250px; 13 height: 150px; 14 padding: 0; 15 border: 1px solid #efefef; 16 margin: 0 30px 30px 0; 17 background: #fff; 18 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 19 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 20 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } 21 22 ul.box li:before, 23 ul.box li:after { 24 content: ''; 25 z-index: -1; 26 position: absolute; 27 left: 10px; 28 bottom: 10px; 29 70%; 30 max- 300px; /* avoid rotation causing ugly appearance at large container widths */ 31 max-height: 100px; 32 height: 55%; 33 -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 34 -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 35 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 36 -webkit-transform: skew(-15deg) rotate(-6deg); 37 -moz-transform: skew(-15deg) rotate(-6deg); 38 -ms-transform: skew(-15deg) rotate(-6deg); 39 -o-transform: skew(-15deg) rotate(-6deg); 40 transform: skew(-15deg) rotate(-6deg); } 41 42 ul.box li:after { 43 left: auto; 44 right: 10px; 45 -webkit-transform: skew(15deg) rotate(6deg); 46 -moz-transform: skew(15deg) rotate(6deg); 47 -ms-transform: skew(15deg) rotate(6deg); 48 -o-transform: skew(15deg) rotate(6deg); 49 transform: skew(15deg) rotate(6deg); }
24图片预加载功能
25 设计梯子型文字
1 h1 { 2 font-size: 72px; 3 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 4 -webkit-background-clip: text; 5 -webkit-text-fill-color: transparent; 6 }
