CSS是一種用來控制網頁外觀的語言。在CSS中,我們可以通過設置不同的屬性值來實現網頁上的樣式風格,例如文字顏色、字體大小、背景圖片等等。而在CSS3中,新增了一些屬性,這些屬性可以幫助我們更好地控制網頁樣式,讓我們來一起看看吧。
/* CSS3新增屬性 */ /* 1. 文字陰影 */ text-shadow: h-shadow v-shadow blur color; 例如:text-shadow: 2px 2px 2px grey; /* 2. 邊框圓角 */ border-radius: value; 例如:border-radius: 5px; /* 3. 盒子陰影 */ box-shadow: h-shadow v-shadow blur spread color; 例如:box-shadow: 2px 2px 2px 1px grey; /* 4. 文字漸變 */ background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 例如:background-image: linear-gradient(to bottom, red, yellow, green); /* 5. 圖片圓角 */ border-radius: value; 例如:border-radius: 50px; /* 6. 透明度 */ opacity: value; 例如:opacity: 0.5; /* 7. 幀動畫 */ @keyframes name { from {property:value;} to {property:value;} } 例如:@keyframes myMove { from {left: 0px;} to {left: 200px;} } /* 8. 背景縮放 */ background-size: value; 例如:background-size: cover; /* 9. 濾鏡 */ filter: filter; 例如:filter: blur(5px); /* 10. 變形 */ transform: value; 例如:transform: rotate(45deg);
以上這些CSS3新增屬性都可以幫助我們更好地控制網頁樣式,讓我們的頁面看上去更加漂亮和優秀。還有很多其他的CSS3屬性,可以帶來更加強大的功能和效果,讓我們一起去探索吧。
下一篇css3 星星軌跡