常用的css属性，总结如下：
/*去掉textarea右下角的几个小点*/
textarea{
resize:none;
}
/*去掉input 文本框边框*/
input[type="text"]：focus{
outline:none;
}
/*表示表格的两边框合并为一条*/
table{
border-collapse:collapse;
}
/*P标签的text-indent:2em; 前面空两格*/
p{
text-indent:2em;
}
/*去掉标签默认的样式*/
-webkit-appearance : none ;
/*文本去掉下划线，添加下划线，文字中间添加横线，文本顶部添加横线*/
text-decoration:none;blink;underline;line-through;overline;
a标签的一些处理问题
a:link:连接平常的状态
a:visited:连接被访问过之后
a:hover:鼠标放到连接上的时候
a:active:连接被按下的时候
/*css三角形*/
div{
0;
height:0;
border:20px solid red;
border-color:transparent transparent transparent red;
} /*html5中placeholder属性设置颜色*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: red;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: red;
}
/*input 文本框中 设置placeholder居中 的样式*/
input::-ms-input-placeholder{text-align: center;}
input::-webkit-input-placeholder{text-align: center;}
input::-moz-input-placeholder{text-align: center;}
/*使用position:absolute 设置水平，垂直居中*/
position:absolute;
left:50%; //left设置为50%，以元素的左侧进行的水平居中，设置left偏移量为50%。
top:50%;//top设置为50%，以元素的上侧进行的垂直居中，设置top偏移量为50%。
margin-top:-100px;
margin-left:-100px;
200px;
height:200px;
z-index:1;
position:absolute;
left:50%; //left设置为50%，以元素的左侧进行的水平居中，设置left偏移量为50%。
top:50%;//top设置为50%，以元素的上侧进行的垂直居中，设置top偏移量为50%。
margin-top:-100px;
margin-left:-100px;
200px;
height:200px;
z-index:1;
/*多行文本溢出时添加.....(仅仅对于webkit浏览器起作用)*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//显示的行数
-webkit-box-orient: vertical;
/**
* 为什么要清除浮动？
* 对于元素子类中存在的浮动元素，会对当前元素造成影响，无法撑起其元素的高度，影响页面布局效果
* 对于元素子类中存在的浮动元素，会对当前元素造成影响，无法撑起其元素的高度，影响页面布局效果
* 清除浮动常用的几种方式：
* 1.给父类元素直接设置height:100px 高度
* 2.给父类元素添加伪元素 :after 例：div:after{content:'';display:block;clear:both;}
* 1.给父类元素直接设置height:100px 高度
* 2.给父类元素添加伪元素 :after 例：div:after{content:'';display:block;clear:both;}
* 3.在子类浮动元素的后面添加一个清除浮动的标签： <div style="clear:both;display:block;"></div>
**/
/*在使用display:inline-block的时候，会出现两个相邻元素之间出现间隔，清除的方法是给父级div加上font-size:0;*/
/*在使用display:inline-block的时候，会出现两个相邻元素之间出现间隔，清除的方法是给父级div加上font-size:0;*/
/*css设置input标签为disabled的样式*/
input:disabled{ border: 1px solid #DDD; background-color: #F5F5F5; color:#ACA899;}//IE8-input[disabled]{ border: 1px solid #DDD; background-color: #F5F5F5; color:#ACA899;}//IE6 Using Javascript to add CSS class "disabled"* html input.disabled{ border: 1px solid #DDD; background-color: #F5F5F5; color:#ACA899;}/*css3动画*/
.test{
opacity: 0;
text-align:center;
font-size:26px;
-webkit-animation:animations2 5s ease-in-out 1s forwards;
-moz-animation:animations2 5s ease-in-out 1s forwards;
animation:animations2 5s ease-in-out 1s forwards;//动画名,动画执行时间,动画频率,动画延迟时间,动画循环次数(执行一次或者无线循环)
}
@-webkit-keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;font-size: 26px;}
45%{opacity:.3;font-size: 24px;}
50%{opacity:.8;font-size: 20px;}
55%{opacity:.3;font-size: 16px;}
60%{opacity:.8;font-size: 14px;}
100%{opacity:0;font-size: 12px;}
}
@-moz-keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;font-size: 26px;}
45%{opacity:.3;font-size: 24px;}
50%{opacity:.8;font-size: 20px;}
55%{opacity:.3;font-size: 16px;}
60%{opacity:.8;font-size: 14px;}
100%{opacity:0;font-size: 12px;}
}
@keyframes animations2{
0%{opacity:0;}
40%{opacity:.8;font-size: 26px;}
45%{opacity:.3;font-size: 24px;}
50%{opacity:.8;font-size: 20px;}
55%{opacity:.3;font-size: 16px;}
60%{opacity:.8;font-size: 14px;}
100%{opacity:0;font-size: 12px;}
}
/*css3过渡动画*/
.test{
border-radius: 100px;
-webkit-border-radius: 100;
-webkit-appearance: none;
-webkit-transition:transform .5s ease-in;
-moz-transition:transform .5s ease-in;
transition:transform .5s ease-in;//过渡动画时间 过渡动画频率
}.test:hover{
-webkit-transform: rotate(360deg);
trasform: rotate(360deg);
}/*内容垂直居中*/
.target{
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction:column;
justify-content:center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//默认去掉滚动条
::-webkit-scrollbar {
0;
}
css资料
css3动画
有趣的flash 动画效果