CSS pits common code sharing

The following is the common code collection, without any technical content, just pits accumulation. Reprint please indicate the source, thank you.

A. CSS 2.x code

1. Word Wrapping

/* Force non-newline */white-space:nowrap;/* word wrap */word-wrap:break-word;word-break:normal;/* Force the English words to break the line */word-break:break-all;

2. Justify on both sides

Text-align:justify;text-justify:inter-ideogra

3. Remove the yellow focus box from the input (text box) or textarea in the WebKit (Chrome) browser

Http://www.cnblogs.com/niao/archive/2012/09/07/2674511.html

input,button,select,textarea{Outline:none;} textarea{font-size:13px; resize:none;}

http://www.tuicool.com/articles/EZ777n

The yellow background of the form is automatically populated after you remove the chrome remember password

4. ie6:position:fixed

. fixed-top/* position fixed top */{position:fixed;bottom:auto;top:0;} * HTML. Fixed-top/* IE6 position fixed top */{position:absolute;bottom:auto;top:expression (eval ( DOCUMENT.DOCUMENTELEMENT.SCROLLTOP));} *html{background-image:url (About:blank); background-attachment:fixed;}

5. Clearfix

. Clearfix:after{visibility:hidden;display:block;font-size:0;content: ""; clear:both;height:0;}. Clearfix{display:inline-block;} HTML[XMLNS]. Clearfix{display:block;} * HTML. clearfix{height:1%;}. Clearfix{*zoom:1;}. Clearfix:after{clear:both;display:table;content: "";}. Clearfix{overflow:hidden;_zoom:1;}

Http://www.daqianduan.com/3606.html

6. seperate-table

. tab{border-collapse:separate;border:1px solid #e0e0e0;}. tab th,.tab td{padding:3px;font-size:12px;background: #f5f9fb; border:1px solid;border-color: #fff #deedf6 #deedf6 #fff ;}. tab th{background: #edf4f0;}. tab Tr.even td{background: #fff;}

<table class= "tab" width= "100%" cellpadding= "0" cellspacing= "0" border= "0" >    <tr>        <th>111 </th>        <td>222</td>    </tr>    <tr>        <th>111</th>        < Td>222</td>    </tr></table>

7. Cursor Size:

http://hi.baidu.com/jiuyuefenglin/item/dee35b080366f11cebfe3862

8. Min-height: Minimum Height compatible code

. Minheight500{min-height:500px;height:auto!important;height:500px;overflow:visible;}

9. Mouse is not allowed to click:

cursor:not-allowed;

Mac Font:osx Platform Font optimization

font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", ' Microsoft Jas Black ';

11. Ellipsis:

. ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

Two. CSS 3 code

1. Gradients:

. a{background:-webkit-gradient (Linear,left top,left bottom,from (#69bdf9), to (#4aa7e8)); background:- Moz-linear-gradient (Top, #67bcf8, #3b96d6), Background:-o-linear-gradient (top, #67bcf8, #3b96d6); background: Linear-gradient (Top, #67bcf8, #3b96d6);}

2. Projection:

. b{box-shadow:inset 1px-1px 0 #f1f1f1; text-shadow:1px 1px 0px #630;} Filter:progid:DXImageTransform.Microsoft.gradient (enabled= ' true ', startcolorstr= ' #99000000 ', endcolorstr= ' # 99000000 '); Background:rgba (0,0,0,.6); Background:rgba (0,0,0,0.5); filter:progid:d XImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #50000000 ', endcolorstr= ' #50000000 ') \9;

See which StartColorStr and endcolorstr, altogether 8 bits, the last 6 bits is the RGB color code, the first two bits are 16 binary

For example 60% Transparent, is 256x0.6=154, and then converted into 16 binary =9a
Background-image:-ms-linear-gradient (Top, #fff, #ddd); Ie10 Gradient
http://www.iefans.net/ie10-yulanban-css3-jianbian/

Alpha Transparent-compatible code generation:

Http://leegorous.net/tools/bg-alpha.html

Conversion of 16 binary

http://www.zhangxinxu.com/wordpress/2010/05/rgba%E9%A2%9C%E8%89%B2%E4%B8%8E%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A% 84%e5%8d%8a%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af%e8%89%b2/

Transparent compatible

3. Search placeholder

Http://www.qianduan.net/search-box-style-custom-webkit.html

::-webkit-input-placeholder {}::-moz-input-placeholder {}input:focus::-webkit-input-placeholder {color: Transparent }-webkit-appearance:none;  Google border removal input[type= "search"]{-webkit-appearance:textfield;}//Remove chrome Default Style Http://i.wanz.im/2011/02/04/remove_ Border_from_input_type_search/http://blog.csdn.net/do_it__/article/details/6789699line-height:normal; /* for Non-ie */line-height:22px\9; /* for IE */   

4.

Title Line:& #13;

5. Gradients

Background: #bde25e; /* Old browsers */background:-moz-linear-gradient (Top, #bde25e 2, #8bb31d 100%);/* ff3.6+ */background:-webkit-gradien T (linear, left top, left bottom, color-stop (2, #bde25e), Color-stop (100%, #8bb31d)); /* chrome,safari4+ */background:-webkit-linear-gradient (Top, #bde25e 2, #8bb31d 100%);/* chrome10+,safari5.1+ */ Background:-o-linear-gradient (Top, #bde25e 2, #8bb31d 100%);/* Opera 11.10+ */background:-ms-linear-gradient (Top, # bde25e 2, #8bb31d 100%); /* ie10+ */background:linear-gradient (to bottom, #bde25e 2, #8bb31d 100%); */* */FILTER:PROGID:DXIMAGETRANSFORM.MICR Osoft.gradient (startcolorstr= ' #bde25e ', endcolorstr= ' #8bb31d ', gradienttype=0); /* ie6-9 */@media screen and (max-width:1220px) and (min-width:1151px) {    #wrapper {font-size:15px;}}

http://www.colorzilla.com/gradient-editor/

Compatible code generation with all browsers

http://segmentfault.com/a/1190000000362621

CSS implementation of TextArea placeholder line wrapping

6. Block Default Events

7. Gray Gray:

8. Firefox block check:

-moz-user-focus:ignore;-moz-user-input:disabled;-moz-user-select:none;

9. Arrows

Display:block;border:solid transparent;line-height:0;width:0; Height:0;border-top:solid #0288ce; border-width:8px 6px 0 6px;border-style:solid; border-width:7px; Border-color:transparent Transparent transparent #ff7020;

Position:absolute;top:0;left:0;border-width:20px;border-style:solid;border-color: #d1ddde Transparent Transparent #d1ddde;

IE6 bug test, set Border-style to dashed.

10. Remove the textarea in the lower right corner to drag the handle:

Resize:none

11. Remove the focus border from the Chrome form form:

Input,button,select,textarea{outline:none}textarea{resize:none}

12. Cancel the yellow border of a link:

A{-webkit-tap-highlight-color:rgba (0,0,0,0);}

13. Gradients

Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #ef6464, endcolorstr= #eb4141);/* Ie<9>*/-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= #ef6464, Endcolorstr= #eb4141) ";/*ie8+*/

14.chrome Font reduction:

. chrome_adjust {font-size:9px;-webkit-transform:scale (0.75);}

WebKit Horizontal Center:

Display:-webkit-box;-webkit-box-pack:center; -webkit-box-align:center;

16. Cancel the chrome search x tip:

AutoFill:

Http://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css

Input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px white inset;} Input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill {    -webkit-box-shadow:0 0 0 1000px White inset;}
Autocomplete= "Off"

18. Mobile Version page A mark dashed box problem

a:focus {outline:none;-moz-outline:none;}

19. Focus Removal Background:

-webkit-tap-highlight-color:rgba (255, 255, 255, 0);-webkit-tap-highlight-color:transparent;  i.e. Nexus5/chrome and Kindle fire HD 7 "

Placeholder Placeholder Color customization

CSS pits common code sharing