CSS3是Cascading Style Sheets(層疊樣式表)的第三個版本。與CSS2相比,它添加了許多新的功能和效果,以提高Web頁面的外觀和交互性。
本文將介紹一些簡單的CSS3效果,包括:
- 圓角邊框
- 陰影
- 過渡效果
/* 圓角邊框 */ .box { border-radius: 10px; } /* 陰影 */ .box { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } /* 過渡效果 */ .box { transition: background-color 0.3s ease-in-out; } .box:hover { background-color: #ff0000; }
以上CSS代碼展示了如何實現這三種效果。其中,圓角邊框通過border-radius屬性來實現,可以將矩形邊框變成圓角矩形或圓形。陰影通過box-shadow屬性來實現,可以為元素添加實時、多層的陰影效果。過渡效果通過transition屬性來實現,可以使元素的顏色、位置或大小等屬性在鼠標懸停或點擊時平滑地改變。
在實際開發中,我們可以根據實際需要使用這些效果來美化界面或增強交互性。此外,CSS3還有許多其他的效果,開發人員可以根據需求自行了解和使用。