CSS3是CSS的升級版本,它新增了許多有用的屬性來幫助開發者更好地設計網頁。以下是CSS3新增的一些屬性:
/*選擇器*/ /*屬性匹配選擇器*/ /*屬性值以特定字符開始的元素*/ [class^="box"] { color: red; } /*屬性值中包含特定字符的元素*/ [class*="box"] { color: blue; } /*屬性值以特定字符結尾的元素*/ [class$="box"] { color: green; } /*偽類選擇器*/ /*目前僅IE8不支持*/ :nth-of-type() { background-color: yellow; } /*目前僅IE9以上版本支持*/ :last-child { background-color: orange; } /*新的屬性*/ /*漸變*/ /*線性漸變*/ /*從上到下漸變*/ background: linear-gradient(to bottom, #f00, #00f); /*從左上到右下的漸變*/ background: linear-gradient(45deg, #f00, #00f); /*徑向漸變*/ background: radial-gradient(at center, #f00, #fff, #00f); /*陰影*/ /*向右下方投影*/ box-shadow: 5px 5px #999; /*出現邊框和投影*/ box-shadow: 5px 5px 10px #999, inset 0 0 5px #000; /*圖像效果*/ /*反向圖片*/ filter: invert(100%); /*變形*/ /*旋轉*/ transform: rotate(45deg); /*縮放*/ transform: scale(2); /*位移*/ transform: translate(100px, 50px); /*傾斜*/ transform: skew(10deg, 20deg);
這些新增的屬性為網頁開發者提供了更多的設計自由度,能夠使網頁更加獨特和具有吸引力。所以,熟練掌握這些屬性對于一個優秀的網頁開發者來說是非常重要的。