CSS3是當前網頁設計中的重要一環,它可以讓我們更好地實現頁面的樣式與效果。以下總結一些CSS3的常見用法。
圓角
border-radius: 5px;
使用border-radius可實現元素的圓角效果,不同參數值可實現不同大小的圓角。
漸變背景
background: linear-gradient(to bottom, #00d2ff, #3a7bd5);
使用background和linear-gradient可實現元素的漸變背景效果,to bottom表示從上到下,#00d2ff和#3a7bd5是漸變的兩種顏色。
陰影效果
box-shadow: 2px 2px 2px #ccc;
使用box-shadow可實現元素的陰影效果,2px和2px分別表示陰影偏移的橫向和縱向距離,2px表示陰影模糊半徑,#ccc表示陰影顏色。
旋轉
transform: rotate(45deg);
使用transform和rotate可實現元素的旋轉效果,參數值45deg表示順時針旋轉45度。
縮放
transform: scale(1.2);
使用transform和scale可實現元素的縮放效果,參數值1.2表示放大1.2倍。
除以上幾種外,CSS3還有眾多其他用法,如animation動畫、transition過渡等等。掌握這些用法可以讓我們更好地實現頁面設計中的效果,讓網頁更加豐富多彩。