CSS3是Cascading Style Sheets的第三個版本,是一種用于網頁設計的樣式語言,它可以控制網頁中HTML元素的樣式。CSS3的引入極大地提高了網頁設計的靈活性和可擴展性。
CSS3中的新特性主要包括文字屬性、盒子模型、顏色、背景、邊框、漸變、變形、動畫、2D/3D轉換等。
/* 文字屬性 */ h1 { font-size: 36px; font-family: Arial, sans-serif; font-weight: bold; color: #333; text-align: center; text-shadow: 2px 2px 3px #ccc; } /* 盒子模型 */ .box { width: 200px; height: 200px; padding: 20px; border: 1px solid #ccc; margin: 20px auto; box-sizing: border-box; } /* 顏色 */ .bg-color { background-color: #f1c40f; } .text-color { color: #e74c3c; } /* 邊框 */ .border { border: 5px solid #3498db; border-radius: 10px; } /* 漸變 */ .gradient { background-image: linear-gradient(to bottom, #3498db, #2c3e50); } /* 變形 */ .transform { transform: rotate(45deg) scale(1.5) translateX(50px) skew(20deg); } /* 動畫 */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation-name: fade; animation-duration: 2s; } /* 2D/3D轉換 */ .card { transform-style: preserve-3d; transform: translateZ(50px); } .card .front { transform-origin: left top; transform: rotateY(0deg); } .card .back { transform-origin: right top; transform: rotateY(-180deg); }
以上代碼只是CSS3的冰山一角,掌握CSS3的所有特性需要不斷學習和實踐。