CSS3 的 Gradients 漸層效果功能是直接套用在 background 屬性中的一個功能，我們這篇介紹的兩種漸層方式差別在於 gradient 的前綴，線性漸層的前綴是 linear，徑向漸層的前綴則是 radial，除此之外，為了可以獲得最佳的瀏覽器支援效果，我們會在 gradient 的最前面再加上瀏覽器的前綴，讓瀏覽器知道我們要顯示 gradient 的功能。
- Google Chrome 與 Apple Safari 使用 -webkit-
- Mozilla FireFox 使用 -moz-
- Opera 使用 -o-
- 線性漸層語法：background: linear-gradient(方向,顏色1,顏色2, ......);
- 徑向漸層語法：background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
- <style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:1000px;
margin-top:0px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
</style>
<body>
<div id="container">
...網站內容...
</div>
</body>
沒有留言:
張貼留言