1.背景圖像
只需將圖像作爲背景應用於主題元素
body {
background-image:url(/img/pattern.gif);
}
默認情況下，瀏覽器水平和垂直地重複平鋪圖像到整個頁面。
在頁面上使用垂直漸變。需要創建一個很高但很窄的漸變圖像，然後使其水平平鋪。
body{
background-image:url(/img/gradient.gif);
background-repeat:repeat-x;
}
但頁面可能很長，這時候就需要添加一個背景顏色，背景圖像會出現在背景顏色上面，當圖像結束時，顏色就顯示出來了，如果選擇的背景顏色與漸變底部的顏色相同，那麼顏色和背景顏色之間的轉換就看不出來了。
body {
background-image:url(/img/gradient.gif);
background-repeat:repeat-x;
background-color:#ccc;
}
還可以設置背景圖像的位置。假設要在站點的每個標題上添加一個項目符號，可以編寫下面這樣的代碼：
h1{
padding-left:30px;
background-image:url(/img/ss.gif);
background-repeat:no-repeat;
background-position: left center;
}
2.圓角框
在CSS3以前，我們需要通過背景圖像來製作圓角框的效果。
而在CSS3中的border-radius屬性，卻可以直接製造圓角框的效果。我們只需設置邊框角的半徑，瀏覽器就會實現這種效果。
.box {
border-radius:1em;
}
這是一個新屬性，對於他的實際實現方式還有爭議。所以在這個屬性得到廣泛使用之前，需要使用與瀏覽器相關的擴展調用它。當前,Firefox和Safari支持這個屬性，所以可以使用-moz和-webkit前綴。
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius:1em;
}
瀏覽器生產商一直在試驗CSS的新擴展。一些生產商率先實現了CSS的新特性，其他生產商還在努力。因此，爲了避免與其他用戶代理混淆或者破壞代碼的有效性，可以通過在選擇器，屬性或值上添加與廠商相關的前綴來調用這些擴展。例如，Mozilla使用-moz前綴，Safari使用-webkit前綴。IE,Opera和所有主流瀏覽器都有相似的前綴。可以使用這些前綴訪問每種瀏覽器特有的特性。
通過這種機制，可以在新的CSS3特性成爲正式規範之前試用它們。
3.投影
簡單的CSS投影技術，其原理是：將一個大的投影圖像應用於容器div的背景。然後使用負的外邊距便宜這個圖像，從而顯示數圖像。
首先需要創建投影圖像，使用PS。創建一個新的PS文件，其尺寸與圖像的最大尺寸一樣。創建一個800*800像素的文件。然後打開背景層並且填充一種
顏色，投影將放在這種顏色上面。讓背景色保持白色。接着創建一個新的層並且填充上白色。然後，將這個層向左上方移動4或5個像素，然後對這個層應用4或5像素寬
的投影。保存並將其命名爲shadow.gif
在HTML中的標記如下：
<div class="img-wrapper"><img src="dunstan.jpg" width="300" height="300" alt="dunstan prchard"/> </div>
爲了產生投影效果，首先需要將投影圖像應用於容器div的背景。因爲div是塊級元素，所以他們會水平伸展，佔據所有可用空間。在這種情況下，我們希望div包圍圖像。可以顯式地設置容器div的寬度，但是這麼做會限制這種技術的用途。可以浮動div,讓它在現代瀏覽器上產生"收縮包圍"的效果。Mac上的IE 5.X不支持這種技術，可以對Mac上的IE 5.X隱藏這些樣式。
.img-wrapper {
background: url(/img/shadow.gif) no-repeat bottom right;
clear:right;
float:left;
}
爲了露出投影圖像併產生投影效果，需要使用負的外邊距便宜這個圖像：
.img-wrapper img {
margin: -5px. 5px 5px -5px;
}
還可以給圖像加上邊框和一些內邊框，從而產生類似照片邊框的效果
.img-wrapper img {
background-color: #fff;
border:1px solid #a9a9a9;
padding:4px;
margin:-5px 5px 5px -5px;
}
這種技術對於大多數符合標準的現代瀏覽器都是有效的。但是，在IE6中，還需要添加如下規則
.img-wrapper {
background:url(/img/shodow.gif) no-repeat bottom right;
clear:right;
float: left;
position:relative;
}
.img-wrapper img{
background-color:#fff;
border:1px solid #a9a9a9;
padding:4px;
display:block;
margin:-5px 5px 5px -5px;
position:relative;
}
現在CSS3開始支持用box-shadow屬性，這個屬性需要4個值:垂直和水平偏移，投影的寬度(模糊程度)和顏色。
img{
box-shadow: 3px 3px 6px #666;
}
這在目前也是一個實驗性的CSS3屬性，所以目前需要使用Safari和Firefox擴展。不過，這個屬性可以很快就得到廣泛支持了
img {
-webkit-box-shadow : 3px 3px 6px #666;
-moz-box-shadow:3px 3px 6px #666;
box-shadow:3px 3px 6px #666;
}
4.不透明度
大多數現代瀏覽器支持CSS不透明度已經有相當一段時間了。假設要彈出一個警告消息，他應該覆蓋在現有文檔上面，同時你仍可以看到下面的東西
.alert {
backkground-color: #000;
border-radius: 2em;
opacity:0.8;
filter:alpha(opacity=80); /*proprietary IE code*/
}
CSS不透明度的主要問題是，除了對背景生效之外i，應用它的元素的內容也會繼承它。因此，上面的代碼會透過警告文本看到頁面上的文本。如果使用非常高的不透明度和高對比度的文本，這可能不是問題。但是，如果不透明度地，框的內容就難以辨認。RGBa就是爲了解決這個問題而設計的。
.alert {
background-color:rgba(0,0,0,0.8);
border-radius:2em;
}
最後一個數字是十進制的不透明度，所以0.8表示這個背景的不透明度是80%，換句話說，透明度是20%。值爲1表示100%不透明度，值爲0表示完全透明。
PNG透明度
PNG文件格式最大的優點之一是它支持alpha透明度。這這可以使設計具備真正的創意。但是，IE6不直接支持PNG透明度，而IE7和IE8支持。對於IE的老版本，有2種解決方法。
在IE6支持PNG透明度的方法是使用專有的AlphaImageLoader