CSS3是CSS的升級版,為開發人員提供了更多的新特性和功能。以下是一些關于CSS3不同方面的圖示:
圖片1: 文本陰影效果 .box { text-shadow: 2px 2px 3px #000; }
使用CSS3,我們可以為文本添加陰影效果。以上代碼中的text-shadow
屬性值的第一個參數是水平方向的偏移量,第二個參數是垂直方向的偏移量,第三個參數是陰影的模糊半徑,最后一個參數是陰影的顏色值。
圖片2: border-radius屬性 .box { border-radius: 10px; }
使用CSS3的border-radius
屬性,我們可以讓盒子變成圓角形狀。以上代碼中的值指定了每個角的半徑大小。
圖片3: 漸變背景色 .box { background: linear-gradient(to bottom, red, blue); }
在CSS3中,我們可以為元素的背景色使用漸變顏色。以上代碼中的linear-gradient
函數指定了漸變的方式,第一個參數是漸變的方向,第二個參數是起始顏色,第三個參數是結束顏色。
圖片4: 動畫效果 .box { animation: myanimation 5s infinite; } @keyframes myanimation { 0% {background-color: red;} 50% {background-color: blue;} 100% {background-color: green;} }
CSS3提供了強大的動畫效果,以上代碼中的animation
屬性指定了動畫的名稱、持續時間和循環次數。@keyframes
規則定義了動畫的關鍵幀,表示動畫在不同時間點上的狀態。
圖片5: 文字漸變效果 .box { background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255, 0, 0, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
使用CSS3,我們可以為文本添加漸變效果。以上代碼中的background
屬性為元素指定了漸變背景色,在使用-webkit-text-fill-color
屬性將文本填充成透明色之前,需要使用-webkit-background-clip
屬性將背景色限制在文本范圍內。