武林網(www.49028c.com)文章簡介：網頁教學網將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小.
CSS是眾所周知且應用廣泛的網站樣式語言，在它的版本三(CSS3)計劃中，新增了一些能夠節省時間的特性。盡管只有當前最新了瀏覽器版本才能支持這些效果，但了解它們還是必須且很有趣味性的。網頁教學網將在這篇文章向大家展示CSS中的5個有趣的新技術:圓角、個別圓角、不透明度、陰影和調整元素大小。
相關文章：介紹CSS3使用技巧5個
1：基本標記
在我們開始這個教程之前，先來創建整個教程都要使用的基本標記。
我們的xHTML需要一下div元素:
綜上所述，我們的xHTML應該是這樣的:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=””>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”round”> </div>
<div id=”indie”> </div>
<div id=”opacity”> </div>
<div id=”shadow”> </div>
<div id=”resize”>
<img src=”image.jpg” alt="css3-特性" src="http://www.49028c.com/uploads/allimg/130808/0Z931K46_0.png" />
目前而言，創建圓角的方法有很多，但都很麻煩。最常用的方法:首先，你要創建圓角的圖片；然后，你要創建很多html元素并使用背景圖像的方式顯示圓角。具體流程你我都很清楚。
這個問題將在CSS3中很簡單的解決掉，那就是叫做“border-radius”的屬性。我們先創建一個黑色的div元素并給他設置黑色的邊框。邊框就是要實現“border-radius”屬性效果的前提。
像這樣:
#round {
background-color: #000;
border: 1px solid #000;
}
現在你已經創建了div元素，它看起來和你預期的樣子一樣，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一樣，它的值越大，圓角也就越大。
新聞熱點
疑難解答
