CSS3是一種令人振奮的技術,有關它的許多特性和可能性令人興奮和著迷。其中一個特性就是球形漸變。
background: radial-gradient(circle at center center, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 1) 60%), linear-gradient(to right, #e66465, #9198e5);
上述代碼是一種通過CSS3實現的球形漸變。背景包括一個徑向漸變和一個線性漸變。
徑向漸變使用radial-gradient屬性。我們指定了徑向漸變的形狀和位置(圓心),使其成為一個球形。我們還指定了徑向漸變的顏色,它最終達到了一個半透明的白色。
線性漸變是使用linear-gradient屬性指定的。它用兩個顏色之間的漸變填充該背景。在這種情況下,我們使用兩個不同的顏色創建一個顏色過渡:從左側的#e66465到右側的#9198e5。
球形漸變可以用于許多場景,例如在CSS3動畫中,讓一個對象變得更加現實。
總而言之,球形漸變是CSS3中很出色的特性之一。在創建視覺效果豐富而吸引人的背景方面,它可以幫助任何開發者獲得良好的效果。
下一篇css3 畫橫線