這篇文章對一些人來說可能是多餘的。我很肯定這些技術已經被到處談論了，如果 你已經知道了，很好。對那些還不瞭解這些技術的人，打起精神來看看它們是如何做到 的吧。這些技術，熟練的 CSS 使用者都已經瞭然於心了，但是更多的新手或初學者還不知道。

無圖片圓角

這個技術變得越來越流行，因為許多人現在轉而使用像 Firefox 和 Safari 等更可靠並且(我敢說)相容性更好的瀏覽器。

CSS 

div.rounded { -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:10px; border:3px solid #f3ddac; background: #fff3d8; }

HTML 

<div class="rounded">  
<h2>The Example</h2>

<p>This is text within the DIV. This is just random meaningless stuff to make this DIV look like it contains something, thus making it a more aesthetic example rather than using a completely empty DIV to demonstrate this technique. <span class="bright-red">Note:</span>*Only Firefox or Safari users will notice rounded edges on this DIV. If the corners of this DIV are square in your browser, I recommend <a href="http://www.mozilla.com/en-US/">downloading Firefox</a>.  
</p>  
</div>

效果：

5-css-techniques-you-should-know-example

絕對定位技巧

當我學會這個技術時，我真想能早點知道它。它肯定能減少我因為試圖把元素正確排列 而拿頭撞桌子的痛苦。(可憐的桌子啊！ – 糖伴西紅柿)

在頁面上建立一個元素的時候，它被預設地設定為postion: static;，正常情況下這挺好。 但是，當你試圖用position: absolute;來定位包含在其中的元素時，它卻不會 相對於它的父元素絕對定位。它反而會相對於頁面絕對定位。下面給出兩個可視圖表。

靜態定位的父元素(預設)

相對定位的父元素

下面的程式碼幫助你理解怎麼使用這個技術：

<meta content="EditPlus 3" name="generator"></meta>  

 
<style type="text/css">  
   body {
    background:#f0f0f0;
    margin:0;
    padding:0;
   }
   div.static {
    background:url('http://eight7teen.com/wp-content/uploads/2009/02/postatic.jpg') no-repeat center center;
    margin:0 auto;
    width:400px;
    height:300px;
    border:3px solid #cb0000;
   }
   div.relative {
    background:url('http://eight7teen.com/wp-content/uploads/2009/02/porelative.jpg') no-repeat center center;
    margin:0 auto;
    position:relative;
    width:400px;
    height:300px;
    border:3px solid #cb0000;
   }
   img.tl {
    position:absolute;
    top:0;
    left:0;
   }
   img.tr {
    position:absolute;
    top:0;
    right:0;
   }
  </style>

半透明背景-不透明文字

建立半透明層時，很多人就被難倒了。貌似大多數人認為，使用 CSS 調整 div 透明度 時，只有背景會受到影響。這是不對的。以如下程式碼段為例：

CSS 

 .transparent { padding:10px; color:#000; background:#cb0000; height:200px; width:250px; opacity: 0.4; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; }

HTML 

<div class="transparent"> Most people think this text should be fully opaque rather than dimming with the background...</div>

效果：

5-css-techniques-you-should-know-1

像你所看到的，應用 CSS 透明的元素，其裡面包含的文字也同樣受到影響。當然， 也可以用一點 CSS 和另一個容器來覆蓋掉：

CSS 

.transparent { position:absolute; top:0; left:0; padding:10px; background:#cb0000; height:200px; width:250px; opacity: 0.4; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; } .text { position:absolute; top:0; left:0; padding:10px; color:#000; height:200px; width:250px; }

<div class="text">This is an example of fully opaque text overlain on a semi-transparent background DIV</div>

效果：

5-css-techniques-you-should-know-2

模擬雙邊框

這個技術已經出現很久了，但是還是有很多人不知道怎麼用 CSS 實現這個效果。 因此，我打算詳細闡述下這個技術並給出一些進一步展示頁面元素美感的例子。

例一：

這個例子簡單地在圖片周圍加了一畫素的邊框。通過 CSS 設定的 background-color 和 padding 使圖片看起來有了多個邊框。

CSS 

img.demo1 { padding:2px; border:1px solid #ababab; background:#dcdcdc; }

HTML 

<img src="yourimagehere.jpg" class="demo1" />

例二： 這個例子使用較小的 padding 和 較大的 border-width，並且用較淡的背景色和 較深的邊框色來反轉了上個例子的效果。

CSS 

img.demo2 { padding:1px; border:2px solid #dcdcdc; background:#ababab; }

HTML 

<img src="yourimagehere.jpg" class="demo2" />

例三：

這個例子展示了利用上例中同樣的技術和一點點想象力能實現的效果。我們只給圖片 的兩個邊設定 padding 和 border，這就實現了陰影效果。

CSS 

img.demo3 { padding:0 2px 2px 0; border:0; border-right:2px solid #eee; border-bottom:2px solid #eee; background:#d1d1d1; }

HTML 

<img src="yourimagehere.jpg" class="demo3" />

建立連結塊

這個技術越來越普遍，因為它不僅可以用來增強網站的美感，而且，如果使用正確， 理論上來說還可有助於頁面上的 SEO。下面是一個快速建立連結塊的指南：

CSS 

 a.blocklink { display:block; width:160px; background:#f0f0f0; color:#999; font-family:corbel, verdana, sans-serif; padding:4px; text-decoration:none; font-weight:normal; font-size:0.72em; border:1px solid #dadada; } a.blocklink strong { font-family:georgia, helvetica, sans-serif; display:block; color:#656565; font-weight:bold; font-size:1em; margin:0 0 3px 0; font-style:italic; } a.blocklink:hover { background:#dcdcdc; color:#303030; border:1px solid #adadad; } a.blocklink:hover strong { color:#cb0000; }

HTML 

[**Link Block Heading** This is the text contained within the link block... It has no real meaning. It's just here to make it look pretty... ](#)

效果：

5-css-techniques-you-should-know-linksblock

糖伴西紅柿說：

如文章所說，這些技術都已經流傳好久了，現在都不新鮮了。不過也算得上一個很好的總結，這篇文章比較 細緻地講了各種技術的實現方法，看起來很理論，其實很實用。