一、背景图片的合并。
使用CSS的属性，将同样内容不一样效果的图片运用到不同层次上的标签中。使用关键字fixed，在以下两条规则中，它都会确保背景图像的左上角位于视口（在这种情况下即浏览器窗口）的左上角。
body{background:white url(shell.jpg) top left no-repeat fixed;}
div #main{background:white url(shell-ripppled.jpg) top left no-repeat fixed;}
例子：复杂的螺旋 http://meyerweb.com/eric/css/edge/complexspiral/demo.html
总结：在IE6以下版本不支持PNG 24位，所以这个在IE6会出现BUG。
二、CSS弹出框。
假设你想为侧边栏中的每个链接都展示一些提示文本，但不想利用工具提示（tooltips）完成这一任务（因为工具提示在不同的浏览器中表现不一致，而且至今还不能对它应用样式）。那么你会设置类似下面的标记。
<html>
<head>
<title></title>
<style type="text/css" media="all">
body {background: #EBECCA; color: #222; margin: 2em 10%; font: medium Georgia, serif;}
ul.toc {width: 5em; list-style: none; border-top: 1px solid silver; padding: 0;}
ul.toc li {border-bottom: 1px solid silver; padding: 0.33em 0; text-align: center;}
ul.toc li a {text-decoration: none;}
ul.toc li{position:relative;}
ul.toc li{position:relative;}
ul.toc li a i{display:none;}
ul.toc li a:hover i{display:block;width:6em;position:absolute;top:0;left:100%;margin:-1em 0 0 1em;padding:1em;background:#CDE;border:1px solid gray;}
</style>
<body>
<ul class="toc">
<li><a href="1.html">Chapter 1<i>In which a dragon is seen</i></a></li>
<li><a href="2.html">Chapter 2<i>In which a knight is summoned</i></a></li>
<li><a href="3.html">Chapter 3<i>In which a princess is disappointed</i></a></li>
</ul>
</body>
</html>
三、框冲切
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="c03.css" type="text/css">
<style type="text/css" media="all">
body {background: #C0FFEE; padding: 1em 5%;}
<!-- 第一种 把一个框放在另一个框的角落里 -->
div.main {background: #BAD;}
.punch {background: #C0FFEE; font-size: 500%;float: left; margin: 0 0.1em 0.1em 0; padding: 0.1em;}
<!-- 第二种 为冲切的部分设置背景，并使用一个漂亮的粗边框将它和框的其余部分隔开-->
div.main{background:;#BAD;}
.punch{background:#987;font-size:500%;float:left;margin:0 0.1em 0.1em 0;padding:0.1em;border:0.2em solid #C0FFEE;border-width:0 0.2em 0.2em 0;}
<!-- 第三种 给主框添加边框-->
div.main{background:#BAD;border:3px solid black;}
.punch{background:#987;font-size:500%;float:left;margin:0 0.1em 0.1em 0;padding:0.1em;}
<!-- 第四种 第三种看起来冲击力不强，解决方法：只需要给冲切的部分加两个边框，再加上一点儿负外边距。-->
div.main{background:#BAD;border:3px solid black;}
.punch{background:#987;font-size:500%;float:left;margin:-3px 0.1em 0.1em -3px;padding:0.1em;border:3px solid black;border-width:0 3px 3px 0;}
</style>
</head>
<body>
<div class="main">
<h1 class="punch">Hi.</h1>
<p>Kat and I have just returned from <a href="http://www.morimotorestaurant.com/" title="Morimoto Restaurant">Morimoto</a>, where we had one of the most amazing meals of our entire lives. Although we’d been seated at a table to start, Kat decided (and rightly so) that we should move to the sushi bar. So with a little help from the hostess, we moved to sit at the end of the bar, just a few feet from Morimoto himself, and after a bit of debate we decided to start out with the seared kobe beef and green tea soba noodles. These were by themselves amazing, but they were just the beginning. From there, we moved into the <i>omakase</i>, or chef’s tasting menu. The best part of this was that we were seated right in front of the chef who was creating our meal, a sushi chef by the name of Alex, so we could ask questions and make requests while he prepared our courses. And what did we have?</p>
<ol>
<li>Toro tartare (one of the restaurant’s signature dishes)</li>
<li>Japanese oysters on the half-shell with four different sauces</li>
<li>Seared scallop</li>
<li>Sashimi salad of striped jack</li>
<li>Mango sorbet with tiny wasabi beigniets</li>
<li>Grilled half lobster in ginger sauce and rice noodles</li>
<li>Grilled kobe beef with pan-seared foie gras</li>
<li>Nigiri sushi including <ins>toro (fatty tuna), kanpachi (juvenile yellowtail),</ins> sawari (kingfish), Japanese tai (red snapper), needlefish, fluke, and fluke fin</li>
<li>Chocolate temple dessert</li>
</ol>
</div>
</body>
</html>
四、纯CSS3圆角。
纯CSS3 驱动，但是浏览器支持有限，而且还需要烦人的供应商前缀，为了确保之后几年内（现在是2013年）它能在支持它的浏览器中正常工作，可以为它们添加供应商前缀，当不需要它们的时候可以直接删除。不过IE9已经支持CSS3的圆角，且不需要供应商前缀，使用border-radius即可。
//图片一 .rounded{background:#FFF;border:2px solid #000;-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;}
//图片二 .rounded{background:#FFF;border:2px solid #000;-moz-border-radius:20px / 60px; border-radius:20px / 60px;}
圆弧变成有点儿椭圆，这是斜杠分隔的两个值产生的效果。（webkit浏览器不支持这种斜杠写法，但是可以使用每个角的独立属性就很有用了。）如果去掉斜杠，会变成图三的效果。
//图片三 .rounded{background:#FFF;border:2px solid #000;-moz-border-radius:20px 60px; border-radius:20px 60px;}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="c03.css" type="text/css">
<style type="text/css" media="all">
body {background: #C0FFEE; font: 1em Georgia, serif; padding: 1em 5%;}
.rounded {font-size: 200%; padding: 1em; width: 17em; margin: 2em auto;}
.rounded span {font-style: italic;}
b.c {background: red;} /* temporary */
.rounded {position: relative; border: 2px solid black; background: white;}
b.c {position: absolute; height: 20px; width: 20px;}
b.tl {top: 0; left: 0;}
b.tr {top: 0; right: 0;}
b.bl {bottom: 0; left: 0;}
b.br {bottom: 0; right: 0;}
.rounded{background:#FFF;border:2px solid #000;-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;}
</style>
</head>
<body>
<div class="main">
<div class="rounded">
<!--
"If everybody minded their own business," the Duchess said in a hoarse growl, "the world would go round a deal faster than it does."
"The atom bombs are piling up in the factories, the police are prowling through the cities, the lies are streaming from the loudspeakers, but the earth is still going round the sun." - George Orwell
-->
Every truth has four corners: as a teacher I give you one corner, and it is for you to find the other three. <span>—Confucius</span>
<!--
"Death is patiently making my mask as I sleep. Each morning I awake to discover in the corners of my eyes the small tears of his wax." - Philip Dow
"Look for intelligence and judgment and, most critically, a capacity to anticipate, to see around corners. Also look for loyalty, integrity, a high energy drive, a balanced ego and the drive to get things done." - Colin Powell
-->
</div>
</div>
</body>
</html>
五、CSS精灵
这种技术最初是由Dava Shea在2004年提出并开始流行的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="c03.css" type="text/css">
<style type="text/css" media="all">
body {margin: 2em 5%;}
ul {float: left; margin: 2.5em; padding: 0; width: 13em;}
.navbar {border-top: 1px solid #787; font: medium Georgia;}
.navbar li {list-style: none; border-bottom: 1px solid #787;}
.navbar a {padding: 0.33em; text-decoration: none; color: #333; padding-left: 30px; display: block; background: url(sprites.png)5px 50% no-repeat;}
.navbar li a:hover {background-position: -795px 50%;}
</style>
</head>
<body>
<ul class="navbar">
<li id="archLink"><a href="http://meyerweb.com/eric/thoughts/">Archives</a></li>
<li id="cssLink"><a href="http://meyerweb.com/eric/css/">CSS</a></li>
<li id="toolsLink"><a href="http://meyerweb.com/eric/tools/">Toolbox</a></li>
<li id="writeLink"><a href="http://meyerweb.com/eric/writing.html">Writing</a></li>
<li id="speakLink"><a href="http://meyerweb.com/eric/talks/">Speaking</a></li>
<li id="otherLink"><a href="http://meyerweb.com/other/">Leftovers</a></li>
<li id="aboutsite"><a href="http://meyerweb.com/ui/about.html">About this site</a></li>
</ul>
</body>
</html>
发展到现在，技术已经相当成熟。下面链接拓展更多 阅读：http://www.qianduan.net/css-spriting-tips.html
六、滑动门
这种技术起初是由Doug Bowman(因对Wired站点进行全CSS的重设计而闻名 )在2003年提出并开始流行的。
同样，拓展阅读：http://www.w3cn.org/article/translate/2005/112.html
4029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
