網頁製作Webjx文章簡介：網頁教學網將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小.
CSS是眾所周知且應用廣泛的網站樣式語言，在它的版本三(CSS3)計劃中，新增了一些能夠節省時
腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小.
CSS是眾所周知且應用廣泛的網站樣式語言，在它的版本三(CSS3)計畫中，新增了一些能夠節省時間的功能。儘管只有當前最新了瀏覽器版本才能支援這些效果，但了解它們還是必須且有趣的。腳本之家將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小。
相關文章：介紹CSS3使用技巧5個
1：基本標記
在我們開始這個教學之前，先來建立整個教學都要使用的基本標記。
我們的xHTML需要一下p元素:
#round, 使用CSS3程式碼實現圓角.
#indie, 應用個別的幾個圓角.
#opacity, 展示新的CSS3實現不透明度的方式.
#shadow,展示不使用Photoshop的情況下，使用CSS3來實現陰影效果.
#resize, 示範如何使用某種CSS來實現重設大小的效果.
綜上所述，我們的xHTML應該是這樣的:
<!DOCTYPE html PUBLIC “-// W3C // DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xml ns=”http://www.w3.org/1999/xhtml”> < head > <meta http-equiv=”Content-Type” content=”text/html; char set =utf-8″ /> <title>An Introduction to CSS3; A Nettuts Tutorial</title> <link href=”style.css” rel=”stylesheet” type=”text/css” /> </head> <body> <p id=”wrapper”> <p id=”round”> </p> <p id=”indie”> </p> <p id=”opacity”> </p> <p id=”shadow”> </p> <p id=”resize”> <img src=”image.jpg” alt=”resizable image” width=”200″ height=”200″> </p> </p> </body> </html>
下面來建立基本CSS檔案:
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
p {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}正如你上面看到的，我們給每個p元素300px的寬和高，並讓它們向左浮動，整個頁面的p都留給我們在後面的工作中添加樣式。看到本信息，說明該文章來自腳本之家www.jb51.net，如果文章不完整請到腳本之家jb51.net瀏覽！
2:圓角
目前而言，創建圓角的方法有很多，但都很麻煩。最常用的方法:首先，你要創建圓角的圖片；然後，你要創建很多html元素並使用背景圖像的方式顯示圓角。具體流程你我都很清楚。
這個問題將在CSS3中很簡單的解決掉，那就是叫做「border-radius」的屬性。我們先創建一個黑色的p元素並給他設定黑色的邊框。邊框就是要實現「border-radius」屬性效果的前提。
像這樣:
#round {
background-color: #000;
border: 1px solid #000;
}現在你已經創建了p元素，它看起來和你預期的樣子一樣，300px款和高有楞有角且是黑色的。下面我們來加入實作圓角的程式碼，它是如此的簡潔，只需要兩行程式碼。
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}在這裡，我們加入了兩行類似的程式碼，-moz-適用於Firefox瀏覽器，而-webkit-則是用於Safari/Chrome瀏覽器。
附註:目前為止IE瀏覽器不支援border-radius屬性，所以如果想讓IE也有圓角效果，那麼就要單獨加入圓角了。
border-radius這個屬性直譯過來是邊框半徑的意思，就如同Photoshop一樣，它的值越大，圓角也就越大。
【相關推薦】
1. CSS3免費影片教學
3. 闡述什麼是CSS3？
#以上是介紹CSS3中的幾個新技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！
