<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><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><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免費視頻教程
2. 分享22款H5和CSS3的協助工具
3. 闡述什麼是CSS3？
4. 關於CSS3中選擇符的執行個體詳解
5. 整合20個CSS/CSS3常用屬性
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
