.liter{ filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4CDDDDDD', endColorstr='#4CDDDDDD'); } :root .liter { filter:none; /*处理IE9浏览器中的滤镜效果*/ background-color:rgba(221,221,221,0.3); }
第一种:table-cell法css
<div class="test_box"> <img src="book.jpg" alt="" /> </div>
.test_box { display:table-cell ;width:200px; height:200px; vertical-align:middle; text-align:center; *float:left; *font-family:simsun; *font-size:200px; *line-height:1; border:1px solid #000000; } .test_box img { vertical-align:middle; }
<div class="test_box"> <span class="hook"></span> <a href="http://blog.linxz.de/css_book/" target="_blank"> <img src="book.jpg" alt="" /> </a> </div>
.test_box { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid #000000; } .test_box .hook { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; } .test_box img { vertical-align:middle; border:0 none; }
.triangle { display:inline-block; width:0; height:0; overflow:hidden; line-height:0; font-size:0; vertical-align:middle; border-right:7px solid #000fff; border-left:0 none; border-top:7px solid transparent; border-bottom:7px solid transparent; _color:#FF3FFF; _filter:chroma(color=#FF3FFF); }
/* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body { height: 100%; } #wrap { min-height: 100%; } #main { overflow:auto; padding-bottom: 150px; /* must be same height as the footer */ } #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; } /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } /* IMPORTANT You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher. <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> < ![endif]--> */
<div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div>
#footer { position:fixed; left:0px; bottom:0px; height:32px; width:100%; background:#333; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); }
这个代码片断经过保证文本的包裹元素宽度适应内容的宽度,可以避免很长的文本超出内容区域html
pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ }
text-shadow
属性能帮助你只用CSS
创造3D
文字前端
p.threeD{ text-shadow: -1px 1px 0 #ddd, -2px 2px 0 #c8c8c8, -3px 3px 0 #ccc, -4px 4px 0 #b8b8b8, -4px 4px 0 #bbb, 0px 1px 1px rgba(0,0,0,.4), 0px 2px 2px rgba(0,0,0,.3), -1px 3px 3px rgba(0,0,0,.2), -1px 5px 5px rgba(0,0,0,.1), -2px 8px 8px rgba(0,0,0,.1), -2px 13px 13px rgba(0,0,0,.1) ; }
div{ opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=75); /* IE lt 8 */ -ms-filter: "alpha(opacity=75)"; /* IE 8 */ -khtml-opacity: .75; /* Safari 1.x */ -moz-opacity: .75; /* FF lt 1.5, Netscape */ }
::selection { background: #ffb7b7; /* Safari */ color: #ffffff; } ::-moz-selection { background: #ffb7b7; /* Firefox */ color: #ffffff; }
#multiple-images { background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat; }
使用css3
来建立多栏,它能够自适应网页,不兼容IEhtml5
#columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule: 1px solid #c4c8cc; }
.textoverflow a { display:block; width:120px; margin: 0px 0px 0px 3px; white-space: nowrap; overflow: hidden; float: left; -o-text-overflow: ellipsis; /* for Opera */ text-overflow: ellipsis; /* for IE */ } .textoverflow:after{ content: "..."; }/* for Firefox */ @media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
让IE9如下的版本支持HTML5
,在项目中加入如下JS
代码css3
// html5 shiv if (!+[1,]) { (function() { var tags = [ 'article', 'aside', 'details', 'figcaption', 'figure', 'footer', 'header', 'hgroup', 'menu', 'nav', 'section', 'summary', 'time', 'mark', 'audio', 'video'], i = 0, len = tags.length; for (; i < len; i++) document.createElement(tags[i]); })(); }
orweb
//code from http://caibaojian.com/popular-css-snippets.html <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
主要用来兼容IE6,不建议使用,因为这个css
代码比较耗内存express
.some_element { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop'); }
转自:前端开发博客浏览器