CSS3是最新的樣式語言,它加入了很多新的功能和特性,讓我們更加方便和高效地實現網頁設計。
以下是CSS3中常用的語法:
/* 選擇器語法 */ #id { /* 樣式屬性 */ color: red; } .class { /* 樣式屬性 */ font-size: 20px; } /* 塊狀元素 */ div { /* 樣式屬性 */ background-color: #eee; } /* 行內元素 */ span { /* 樣式屬性 */ font-weight: bold; } /* 偽類 */ a:hover { /* 樣式屬性 */ color: blue; } /* 盒模型 */ .box { width: 200px; height: 200px; padding: 10px; border: 2px solid black; margin: 20px; } /* 漸變 */ .gradient { /* 線性漸變 */ background-image: linear-gradient(to bottom right, red, yellow); /* 徑向漸變 */ background-image: radial-gradient(red, yellow); } /* 動畫 */ .animation { /* 動畫名稱 */ animation-name: move; /* 動畫時長 */ animation-duration: 3s; /* 動畫循環次數 */ animation-iteration-count: infinite; } /* 媒體查詢 */ @media screen and (max-width: 600px) { /* 樣式屬性 */ body { font-size: 10px; } }
以上是CSS3中常用的語法,我們可以靈活地使用它們來實現更加美觀和高效的網頁設計。
下一篇css3中心放大動畫