CSS是一種用于樣式和布局網頁的語言,也是Web開發中必不可少的技術。CSS3是CSS的最新版本,它新增了許多強大的功能,提升了開發效率和用戶體驗。
/* CSS3新增的一些選擇器 */ /* :nth-child() 具有相同父元素的每個子元素,按照在其中的順序被計數。 */ li:nth-child(3) { color: blue; } /* :nth-last-child() 與:nth-child()簡單的將計數器反向。 */ li:nth-last-child(2) { color: blue; } /* :first-of-type 表示選擇同種類型中的第一個元素。 */ p:first-of-type { font-weight: bold; } /* :last-of-type 表示選擇同種類型中的最后一個元素。 */ p:last-of-type { font-style: italic; } /* CSS3中新增的一些簡寫屬性 */ /* border-radius 邊框半徑 */ div { border-radius: 10px; } /* box-shadow 盒子陰影 */ div { box-shadow: 5px 5px 5px #999; } /* text-shadow 文本陰影 */ h1 { text-shadow: 1px 1px #999; } /* background 背景 */ div { background: url("bg.jpg") no-repeat center center fixed; background-size: cover; } /* CSS3中新增的一些動畫效果 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* opacity 透明度 */ /* animation 動畫 */ div { opacity: 0; animation: fadeIn 2s; }
上面是一些CSS3的簡單應用,目的是展示其中的一些新增特性。有了這些強大的功能,我們可以簡單易用地實現各種效果,提升網頁的品質和用戶體驗。