Common CSS3 Styles

1, form, a line of text, divided into 2 columns or three columns, one column or two columns of fixed width, the last column 100% length using display:table

Outer structure Style:

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

Memory Fixed width style:

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

Memory 100% Width Style:

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

2, page scrolling smoothly, add style (mobile phone side slide good)

1. -webkit-overflow-scrolling:touch;

3, the page smooth scrolling, using CSS (from the right side, mainly transform style)Original style:

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

Original style +show:

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

4. Select drop-down box does not show arrows and borders on the phone

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

5, picture background image useBackground-size:contain;
6, text can not be selected in the body settings-webkit-user-select:none;
7. Linear gradient

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, the bottom edge of the mobile phone list is set to 0.5px, can not be directly set to border-bottom:0.5px solid #eee; Use the following methodsUL 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, when clicked to make element without background, not highlight-webkit-tap-highlight-color: transparent;

Common CSS3 Styles