/** ie8支持透明度 **/
rgba(0,0,0,0.4); // 不支持ie8filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);这个颜色“#19000000”是由两部分组成的。第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下: 0.1 - 19 ; 0.2 - 33 ; 0.3 - 4C ; 0.4 - 66 ; 0.5 - 7F ; 0.6 - 99 ; 0.7 - B2 ; 0.8 - C8 ; 0.9 - E5 ; 第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。到这里,rgba的用法就可以兼容IE8了。 禁止选择文本 body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}在可打印的网页中显示URLs@media print { a:after { content: " [" attr(href) "] "; } }深灰色的点击渐变按钮
.graybtn { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) ); background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1'); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff;}.graybtn:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff'); }.graybtn:active { position:relative; top:1px;}网页顶部盒阴影body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100;}在可点击的项目上强制手型a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer;}CSS3 鲜艳的输入(边框渐变)input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #ddd;}input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1);}三角形列表项目符号ul { margin: 0.75em 0; padding: 0 1em; list-style: none;}li:before { content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative;}内部CSS3 盒阴影#mydiv { -moz-box-shadow: inset 2px 0 4px #000; -webkit-box-shadow: inset 2px 0 4px #000; box-shadow: inset 2px 0 4px #000;}外部CSS3 盒阴影#mydiv { -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);}@font-face模板@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}body { font-family: 'MyWebFont', Arial, sans-serif;}CSS3渐变模板#colorbox { background: #629721; background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721)); background-image: -webkit-linear-gradient(top, #83b842, #629721); background-image: -moz-linear-gradient(top, #83b842, #629721); background-image: -ms-linear-gradient(top, #83b842, #629721); background-image: -o-linear-gradient(top, #83b842, #629721); background-image: linear-gradient(top, #83b842, #629721);}CSS3:全屏背景html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}锚链接伪类a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; }图片边框偏光img.polaroid { background:#000; /*Change this to a background image or remove*/ border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*Set to height of your image or desired div*/ width:200px; /*Set to width of your image or desired div*/}通用媒体查询/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */}/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */}/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) { /* Styles */}/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */}/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */}/* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */}/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */}/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { /* Styles */}跨浏览器透明.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}用CSS动画实现省略号动画.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */}@keyframes ellipsis { from { width: 2px; } to { width: 15px; }}制造模糊文本.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}包裹长文本 文本过长自动换行不会穿破盒子pre { white-space: pre-line; word-wrap: break-word;}背景渐变色button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s;} button:hover { background-position: 0 0;}内容可编辑(contenteditable="true")<ul contenteditable="true"> <li>悼念遇难香港同胞 </li> <li>深圳特区30周年</li> <li>伊春空难</li></ul>输入框改变placeholder字体颜色::-webkit-input-placeholder { color: red;}:-moz-placeholder { color: red;}::-moz-placeholder{ color: red;}:-ms-input-placeholder { color: red;}实现文字两端对齐
实现两端对齐方只需一行代码:text-align-last: justify;
城别.笔