15个css常用技巧。。。。。

1、三角形列表项目符号

ul {
    
 margin: 0.75em 0;
    
 padding: 0 1em;
    
 list-style: none;

}

li:before {
     
 content: "";
    
 border-color: transparent #111;
    
 border-style: solid;
    
 border-width: 0.35em 0 0.35em 0.45em;
    
 display: block;
    
 height: 0;
    
 width: 0;
    
 left: -1em;
    
 top: 0.9em;
    
 position: relative;

}

2、外部CSS3 盒阴影

#mydiv {
     
 -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    
 -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    
 box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);

}

3、内部CSS3 盒阴影

#mydiv {
     
 -moz-box-shadow: inset 2px 0 4px #000;
    
 -webkit-box-shadow: inset 2px 0 4px #000;
    
 box-shadow: inset 2px 0 4px #000;

}

4、CSS3 斑马线

tbody tr:nth-child(odd) {
    
 background-color: #ccc;

}

5、强制出现垂直滚动条

html {
 height: 101% }

6、内容垂直居中

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

}
 

7、CSS3：全屏背景

html {
     
 background: url('images/bg.jpg') no-repeat center center fixed;
     
 -webkit-background-size: cover;
    
 -moz-background-size: cover;
    
 -o-background-size: cover;
    
 background-size: cover;

}

8、锚链接伪类

a:link {
     color: blue;
 }

a:visited {
     color: purple;
 }

a:hover {
     color: red;
 }

a:active {
     color: yellow;
 }

9、为logo隐藏H1

h1 {
    
 text-indent: -9999px;
    
 margin: 0 auto;
    
 width: 320px;
    
 height: 85px;
    
 background: transparent url("images/logo.png") no-repeat scroll;

}

10、自定义文本选择

::selection {
     background: #e2eae2;
 }

::-moz-selection {
     background: #e2eae2;
 }

::-webkit-selection {
     background: #e2eae2;
 }

11、跨浏览器的透明

.transparent {
    
 filter: alpha(opacity=50);
     /* internet explorer */
 -khtml-opacity: 0.5;
     /* khtml, old safari */
 -moz-opacity: 0.5;
     /* mozilla, netscape */
 opacity: 0.5;
 /* fx, safari, opera */
}

12、新版清除浮动（2011）

.clearfix:before, .container:after {
     content: "";
     display: table;
 }

.clearfix:after {
     clear: both;
 }

/* IE 6/7 */
.clearfix {
     zoom: 1;
 }

13、典型的CSS清除浮动

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

.clearfix {
     display: inline-block;
 }

html[xmlns] .clearfix {
     display: block;
 }

* html .clearfix {
     height: 1%;
 }

14、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现

.blurry-text {
    
 color: transparent;
    
 text-shadow: 0 0 5px rgba(0,0,0,0.5);

}
    

15、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space: nowrap; 能让文本正确的换行

td {
    
 white-space: nowrap;
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！