CSS3中有很多實用的函數可以幫助我們快速地編寫樣式,下面是一些比較常用的函數:
1. calc() 計算長度值,支持加、減、乘、除四則運算,可以使用百分比、em、rem等單位。 例如: width: calc(100% - 50px); 2. url() 用于設置元素背景圖片的路徑。 例如: background-image: url("images/background.jpg"); 3. rgb()和rgba() 用于設置RGB顏色,其中rgba()除了設置紅、綠、藍三種顏色之外,還可以設置透明度。 例如: color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.5); 4. linear-gradient() 用于設置線性漸變背景色。 例如: background: linear-gradient(to right, red, yellow); 5. radial-gradient() 用于設置徑向漸變背景色。 例如: background: radial-gradient(circle at center, red, yellow); 6. transform() 用于進行元素的變形,包括旋轉、縮放、位移、斜切等操作。 例如: transform: rotate(45deg) scale(1.2) translate(50px, 50px); 7. transition() 用于設置CSS屬性的過渡效果。 例如: transition: all 0.5s ease-in-out; 8. box-shadow() 用于設置盒子的陰影效果。 例如: box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 9. text-shadow() 用于設置文本的陰影效果。 例如: text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 10. border-radius() 用于設置盒子的圓角效果。 例如: border-radius: 10px;