乐趣区

25个强大的CSS代码据说这些是开发者经常遇到比较棘手的代码

jiezi
这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS 透明度，梯形环绕，CSS 小三角等，希望对你有用

1 简单又好的 Blockquote 样式

CSS 代码如下 

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 图像在水平或者垂直方向的绝对定位

css 代码 

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

3 用 PHP 压缩 CSS 代码 

<?php
    ob_start ("ob_gzhandler");
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires:" .
    gmdate("D, d M Y H:i:s",
    time() + $offset) . "GMT";
    header($ExpStr);
?>
body {color: red;}

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

具体代码如下 首先是 html 代码 

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

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

5. 翻转图片

CSS 代码 

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

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

翻转后的图片

6 Clearfix

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {display: inline-block;}

/* start commented backslash hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* close commented backslash hack */

7 在 IE6 中的固定定位

8 隐藏和文本文字缩进 

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

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

9 在 iPad 当中定位 CSS 代码

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

/* 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、或者其他图标

11 边框圆角 

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

12 去除 textarea 在 IE 当中的滚动条效果 

textarea{overflow:auto;}

13 使页面在中央 

.wrapper {
    width:960px;
    margin:0 auto;
}

14 CSS 文字阴影效果 

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

15 CSS 透明度

一谈到透明度问题，这个真是令人头疼，明明在火狐和谷歌浏览器当中效果看到好好的，在 IE 当中浏览就变了味，好在可以通过下面的 CSS 代码解决 

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

16 垂直居中 

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

17 Min-height in IE

.box {
    min-height:500px;
    height:auto !important;
    height:500px;
}

18 使 gif 图像可以来回蹦跳

19 打印分页符 

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

20 固定页脚位置 

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

21 文字旋转 

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

22 A 链接伪类（按顺序）

CSS 代码 

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

23 设置 ul 阴影效果和边框圆角

CSS 代码如下 

ul.box {
  position: relative;
  z-index: 1; /* prevent shadows falling behind containers with backgrounds */
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.box li {
  position: relative;
  float: left;
  width: 250px;
  height: 150px;
  padding: 0;
  border: 1px solid #efefef;
  margin: 0 30px 30px 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:before, ul.box li:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 70%;
  max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  max-height: 100px;
  height: 55%;
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg);
}

ul.box li:after {
  left: auto;
  right: 10px;
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg);
}

24 图片预加载功能

25 设计梯子型文字 

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;
}
退出移动版