CSS小集合,大智慧。

[smallbore]

1. 文字溢出隐藏，出现省略号：
word-break: break-all;
text-overflow: ellipsis; /出现省略号/
display: -webkit-box; /** 对象作为伸缩盒子模型显示 /
-webkit-box-orient: vertical; / 设置或检索伸缩盒对象的子元素的排列方式 /
-webkit-line-clamp: 1; / 显示的行数 /
overflow: hidden; / 隐藏超出的内容 **/

[smallbore]

2. 利于css3,伪类和选择器，实现简单的点击，选择效果：
input元素的：checked属性；
<label class="input-checked" for="small">
<input type="checkbox" id="small">
<i></i>
点赞
</label>
<style>
.input-checked>input{display:none;}
.input-checked>input + i{display:inline-block;width:20px;height:20px;background:#ccc;}
.input-checked>input:checked + i{background:pink;}
</style>

[smallbore]

3.1 用border，实现三角形：
border-style:solid; /* 为实线 /
border-width:8px 8px 12px 8px; / 底部边框拉伸，改变三角形角度大小*/
border-color: transparent transparent #fff transparent; /* 只在显示是边框设置颜色，其他为透明*/
-webkit-transform: rotate(450deg);transform: rotate(450deg); /* 按需求旋转角度*/

3.2 用border,实现前进后退箭头：
.go-back:before {
content: "";
position: absolute;
top: 8px;
left: 7px;
width: 12px;
height: 12px;
border: 2px solid #fff;
border-width: 2px 0 0 2px; /* 只让相邻的两条边框显示*/
-webkit-transform: rotate(315deg);/* 通过旋转的角度，使箭头向左或向右*/
transform: rotate(315deg);
}
3.3 用border,实现盒子突出的尖角：
.sharp{
z-index: 2;
position:absolute;
right:-20px;
top:20px;
border-style:solid;
border-color:transparent transparent transparent #fff;
border-width:10px;
}
.sharp:after{
content:" ";
position:absolute;
top:-8px;
left:-10px;
border-style:solid;
border-color:transparent transparent transparent blue;
border-width:8px;
}

[smallbore]

4. position移动布局技巧：
   对于移动的弹性布局，
   上固定，下固定，中弹性布局，
   左固定，有固定，中间弹性布局：
   html:
   <div class="page">
   <div class="page_top"></div>
<div class="page_com">
   <div class="com_left"></div>
<div class="com_center"></div>
<div class="com_right"></div>
</div>
<div class="page_foot"></div>
</div>
   css:
   *{margin:0;padding:0;}
   .page{position:absolute;top:0;left:0;right:0;bottom:0;}
   .page_top{position:absolute;top:0;left:0;right:0;height:100px;background:pink;}
   .page_com{position:absolute;left:0;right:0;top:100px;bottom:100px;background:black;}
   .page_foot{position:absolute;bottom:0;left:0;right:0;height:100px;background:gray;}

   .page_com .com_left{position:absolute;width:100px;height:100%;left:0;top:0;background:blue;}
   .page_com .com_center{position:absolute;left:100px;right:100px;bottom:0;top:0;background:orange;}
   .page_com .com_right{position:absolute;width:100px;height:100%;right:0;top:0;background:yellow;}

[smallbore]

5.css3新世界
/* 背景渐变 /
background: -moz-linear-gradient(left top, #22d8ff, #2298ff);
background: -webkit-linear-gradient(left top, #22d8ff, #2298ff);
background: -o-linear-gradient(left top, #22d8ff, #2298ff);
/ 盒子阴影 */
-webkit-box-shadow: 0 5px 10px #a0c8e3;
-moz-box-shadow: 0 5px 10px #a0c8e3;
box-shadow: 0 5px 10px #a0c8e3;

/* 文字描边 */
text-shadow:1px 0px 0px #885437,-1px 0px 0px #885437,0px 1px 0px #885437,0px -1px 0px #885437;
-webkit-text-shadow:1px 0px 0px #885437,-1px 0px 0px #885437,0px 1px 0px #885437,0px -1px 0px #885437;

[smallbore]

6.animation属性，实现人物走动的动画效果
通过改变定位的位置，加上gif,动态图，完成人物走动，转换的角度，让人物来回走动。
如果一个页面多个引用的时候，包多一div就好。
.eee02{
animation:lailai 8s linear infinite 0s;
-webkit-animation:lailai 8s linear infinite 0s;
}

@Keyframes lailai {
0% { left:19% }
50% { left:29%; transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
50.5% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
51% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
99.9% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
100% {transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
}
@-webkit-keyframes lailai {
0% { left:19% }
50% { left:29%; transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
50.5% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
51% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
99.9% { transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
100% {transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
}