常用的css3样式

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

外层结构样式：

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

内存固定宽度样式：

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

内存100%宽度样式：

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

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

1. -webkit-overflow-scrolling: touch;

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

原本样式：

1. position: fixed;
2. background:#FFFFFF;
3. width: 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. width: 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. width: 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;