您當前位置：首頁 > web前端 > 特效 > CSS的線性漸變樣式

CSS的線性漸變樣式

來源：程序員人生發布時間：2014-07-14 22:52:23 閱讀次數：5370次

CSS如何設置線性漸變樣式呢，當然呢，個人覺得還是不要這樣設置，因為涉及到兼容性非常困在，常規做法是直接用ps畫一個漸變圖片，然后取一個像素款，到時候再設置背景y軸重復即可。
如果非要用純CSS設置線性漸變樣式怎么處理呢，代碼如下：

.wfuyu{

height: 50px;

background-color: #d5d5d5;

background-image: -webkit-linear-gradient(#000, #fff);/*Webkit*/

background-image: -moz-linear-gradient(#000, #fff);

background-image: -ms-linear-gradient(#000, #fff);

background-image: -o-linear-gradient(#000, #fff);/*Opera*/

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000, endColorstr=#fff);/*IE<9>*/

}

</style>

<body>

<div class="wfuyu"></div>

效果如下圖
程序員人生

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 php監控別人微博是否更新

下一篇 css樣式多背景在同一頁面的設置方法

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS的線性漸變樣式