CSS3是Cascading Style Sheets的縮寫,是用來定義網頁樣式的樣式表語言。CSS3是CSS2的升級版,增加了許多新的特性和模塊。本文將介紹一些CSS3的特性。
1. 邊框和陰影
/* 給div添加圓角 */ div { border-radius: 10px; } /* 添加邊框 */ div { border: 2px solid #ccc; } /* 添加陰影 */ div { box-shadow: 0px 0px 10px #ccc; }
2. 漸變
/* 線性漸變 */ div { background: linear-gradient(to bottom, #fff, #000); } /* 徑向漸變 */ div { background: radial-gradient(circle, #fff, #000); }
3. 動畫
/* 給元素添加旋轉動畫 */ div { animation: rotate 2s linear infinite; } /* 定義動畫關鍵幀 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
4. 媒體查詢
/* 媒體查詢 */ @media (max-width: 600px) { body { font-size: 14px; } }
5. 變換
/* 平移 */ div { transform: translate(50px, 50px); } /* 縮放 */ div { transform: scale(2, 2); } /* 旋轉 */ div { transform: rotate(45deg); } /* 傾斜 */ div { transform: skew(30deg, 10deg); }
這些是CSS3的一些常用特性,它們在網頁開發中非常有用,可以讓網頁更加炫酷和豐富。如果想要學習更多的CSS3特性和用法,可以參考相關的學習資料。