25个强大的CSS代码

妖狐艹你老母 2022-06-10 06:38 187阅读 0赞

## 今天介绍给大家我收藏的25个非常有用的CSS代码片段，在你开发基于CSS的网站时，这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS透明度，梯形环绕，CSS小三角等，希望对你有用 ##

## 1简单又好的 Blockquote 样式 ##

![2012072109050417.jpg][]

CSS代码如下

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

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

css代码

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

##   3用PHP压缩CSS代码 ##

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

## 4如何用css实现小三角形符号 ##

![2012072109055546.jpg][]

具体代码如下  首先是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代码 ##

![复制代码][copycode.gif]

1 .arrow-up {
     2     width: 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     width: 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     width: 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     width: 0; 
    30     height: 0; 
    31     border-top: 10px solid transparent;
    32     border-bottom: 10px solid transparent; 
    33     
    34     border-right:10px solid blue; 
    35 }

![复制代码][copycode.gif]

##  5.翻转图片 ##

CSS代码

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

用这些代码可以实现图像的360的翻转，效果如下，没有翻转前的图片

![2012072019341671.jpg][]

翻转后的图片

![2012072019355193.jpg][]

## 6 Clearfix ##

![复制代码][copycode.gif]

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 */

![复制代码][copycode.gif]

## 7 在IE6中的固定定位 ##

![2012072109063628.jpg][]

## 8 隐藏和文本文字缩进[   ][Link 1] ##

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

上面CSS代码设置text-indent 为负值，正好文字移到了左边，可以实现部分文字隐藏

## 9在iPad当中定位CSS代码 ##

![2012072109070487.jpg][]

## 10根据不同的文件类型，展示不同的链接，看下面的代码[   ][Link 2] ##

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段，你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标

## 11 边框圆角[   ][Link 3] ##

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当中的滚动条效果 ##

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <span style="font-family:Times New Roman; font-size:14px"><code>textarea{ </code></span> 
     </div> 
     <div> 
      <span style="font-family:Times New Roman; font-size:14px"><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>overflow:auto;</code></span> 
     </div> 
     <div> 
      <span style="font-family:Times New Roman; font-size:14px"><code>}</code></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## 13 使页面在中央 ##

1 .wrapper {
    2     width:960px;
    3     margin:0 auto;
    4 }

## 14  CSS文字阴影效果[   ][Link 4] ##

1 p { text-shadow: 1px 1px 1px #000; }

## 15 CSS透明度[   ][Link 1] ##

一谈到透明度问题，这个真是令人头疼，明明在火狐和谷歌浏览器当中效果看到好好的，在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 垂直居中[   ][Link 5] ##

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图像可以来回蹦跳[   ][Link 6] ##

![2012072109073891.jpg][]

## 19  打印分页符[   ][Link 7] ##

1 .page-break{
    2     page-break-before:always;
    3 }

## 20 固定页脚位置[   ][Link 8] ##

![复制代码][copycode.gif]

1 #footer {
     2    position:fixed;
     3    left:0px;
     4    bottom:0px;
     5    height:32px;
     6    width: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 }

![复制代码][copycode.gif]

## 21 文字旋转[   ][Link 9] ##

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

## 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代码如下

![复制代码][copycode.gif]

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 width: 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 width: 70%;
    30 max-width: 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); }

![复制代码][copycode.gif]

##   24图片预加载功能 ##

![2012072109082978.jpg][]

## 25 设计梯子型文字 [   ][Link 10] ##

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 }

[内容详情点击打开链接][Link 11]

[2012072109050417.jpg]: /images/20220610/f13768d37db8409189692a8fb22ec220.png
[copycode.gif]: /images/20220610/28fa4fb3b235429bb422297b00eea989.png
[2012072109055546.jpg]: /images/20220610/54c0127fb95f486c9f2a17d5ea204f74.png
[2012072019341671.jpg]: /images/20220610/335bd39ba14640108bf224a50c51ed16.png
[2012072019355193.jpg]: /images/20220610/0fbf6522b4de45d2bd33c0894f5d4d22.png
[2012072109063628.jpg]: /images/20220610/e05989668a64494982fe101019526701.png
[Link 1]: http://www.1stwebdesigner.com/design/useful-css-snippets/
[2012072109070487.jpg]: /images/20220610/fca123dca15f4e358166c7dc9a3aae8a.png
[Link 2]: http://devsnippets.com/article/reviews/css-code-snippets-15-wicked-tricks.html
[Link 3]: http://css-tricks.com/snippets/css/end-articles-with-ivy-leaf/
[Link 4]: http://css-tricks.com/snippets/css/css-text-shadow/
[Link 5]: http://css-tricks.com/snippets/css/sticky-footer/
[Link 6]: http://css-tricks.com/snippets/css/bouncy-animated-loading-animation/
[2012072109073891.jpg]: /images/20220610/b8befe2b6f774d0e8196d473659d3744.png
[Link 7]: http://css-tricks.com/snippets/css/slide-in-image-boxes/
[Link 8]: http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/
[Link 9]: http://css-tricks.com/snippets/css/text-rotation/
[2012072109082978.jpg]: /images/20220610/c5239df4bfde40b2b71f0e7744604363.png
[Link 10]: http://css-tricks.com/snippets/css/gradient-text/
[Link 11]: http://www.cnblogs.com/58top/archive/2012/07/20/2601686.html