CSS3是CSS的升級版本,它帶來了很多新的特性和廢棄了一些過時的特性。在面試中,我們常常會被問到CSS3的新特性,下面我們來看一些常見的CSS3新特性。
/* 1. 媒體查詢 */ @media screen and (max-width: 768px) { .box { font-size: 14px; } } /* 2. 文字陰影 */ text-shadow: 2px 2px 3px #000; /* 3. 邊框圓角 */ border-radius: 10px; /* 4. 漸變背景 */ background: linear-gradient(to right, #ff9900, #ffff66); /* 5. 盒子陰影 */ box-shadow: 10px 10px 5px #888; /* 6. 2D/3D 變形 */ transform: rotate(45deg); /* 7. 過渡效果 */ transition: all 0.5s ease-in-out; /* 8. 動畫效果 */ @keyframes mymove { from {left: 0px;} to {left: 200px;} } div { animation: mymove 5s infinite; } /* 9. 媒體控制 */ @media print { body { font-family: Dejavu Sans; } }
通過學習CSS3新特性,我們可以更加靈活地編寫網頁,為用戶提供更好的體驗。同時,掌握CSS3也是前端開發工程師必備的技能之一。