相信很多自学的小伙伴都想学习web前端，可以关注小编后私信【学习】可以免费领取学习地址/案例教程/2018最新的一套学习教程，让学习有方向。

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

对前端有兴趣或者正在学习web前端的小伙伴，可以私信小编【学习】即可免费领取2018最新的一整套系统web前端学习教程！