常用的css3样式

1、表单形式，一行文字，分2列或者三列，其中一列或者两列宽度固定，最后一列100%长度使用display:table

外层结构样式：

1.  display: table;
2.   100%;
3.  box-sizing: border-box;

内存固定宽度样式：

1.  display: table-cell;
2.   65px;

内存100%宽度样式：

1.   100%;
2.  display: table-cell;

2、页面滚动顺畅，添加样式（手机端滑动好）

1.  -webkit-overflow-scrolling: touch;

3、页面平滑滚动，使用css（从右侧过来，主要是transform样式）

原本样式：

1. position: fixed;
2.  background:#FFFFFF;
3.   100%;
4.  padding: 0px;
5.  top: 0px;
6.  z-index: 99999;
7.  height: 100%;
8.  -webkit-transform: translateX(100%);
9.  transform: translateX(100%);
10.  -webkit-transition: -webkit-transform 0.5s ease-in-out;
11.  transition: transform 0.5s ease-in-out;

原本样式+show：

1.  -webkit-transform: translateX(0%);
2.  transform: translateX(0%);

4、select下拉框手机上不显示箭头与边框

1.  background-color: transparent;
2.  background-image: none;
3.  -webkit-appearance: none;
4.  box-shadow: none;

5、图片背景图使用

background-size: contain;

6、文字不能选择body中设置

-webkit-user-select: none;

7、线性渐变

1.  1px;
2.  height: 410px;
3.  float: left;
4.  margin-left: 69px;
5.  background: -moz-linear-gradient(top,rgba(255,255,255,0.1),#fff,rgba(255,255,255,0.1));
6.  background: -webkit-linear-gradient(top,rgba(255,255,255,0.1),#fff,rgba(255,255,255,0.1));

 

 

8、手机端列表下边线设置为0.5px，无法直接设置为border-bottom:0.5px solid #eee;使用下列方法

ul li:after {

1.  content: " ";
2.  position: absolute;
3.  left: 0;
4.  top: 0;
5.   200%;
6.  height: 1px;
7.  border-bottom: 1px solid #eee;
8.  -webkit-transform-origin: 0 0;
9.  transform-origin: 0 0;
10.  -webkit-transform: scale(0.5);
11.  transform: scale(0.5);

}

9、点击时使元素无背景，不高亮

-webkit-tap-highlight-color: transparent;