兼容IE与firefox的css 线性渐变（linear-gradient）
生活随笔
收集整理的這篇文章主要介紹了
兼容IE与firefox的css 线性渐变（linear-gradient）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
IE系列?filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');參數(shù)：startColorStr起始顏色 endColorStr結(jié)束顏色 gradientType為0時(shí)代表垂直，為1時(shí)代表水平?Firefox?background: -moz-linear-gradient(top, #FF0000, #F9F900);?參數(shù)：top、bottom垂直，left、right水平 例如：top時(shí)從頂部由#FF0000到#F9F900漸變，bottom時(shí)從底部由#FF0000到#F9F900漸變?Opera?background: -o-linear-gradient(top,#FF0000, #F9F900);?參數(shù)：top、bottom垂直，left、right水平 例如：top時(shí)從頂部由#FF0000到#F9F900漸變，bottom時(shí)從底部由#FF0000到#F9F900漸變?webkit，如Chrome、Safari等?background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));?參數(shù)：linear線性， x1 x2, x3 x4 x1與x3相同時(shí)垂直，x2與x4相同時(shí)水平 from起始顏色 to結(jié)束顏色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?<html xmlns="http://www.w3.org/1999/xhtml">?<head>?<title>線性漸變（linear-gradient）---http://www.jb51.net</title>?<style type="text/css">?.test1?{?width: 200px;?height: 80px;?text-align: center;?line-height: 80px;?margin-bottom: 10px;?color: White;?font-size: 20px;?filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');?background: -moz-linear-gradient(top, #FF0000, #F9F900);?background: -o-linear-gradient(top,#FF0000, #F9F900);?background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));?}?.test2?{?width: 200px;?height: 80px;?text-align: center;?line-height: 80px;?margin-bottom: 10px;?color: White;?font-size: 20px;?filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');?background: -moz-linear-gradient(left, #FF0000, #F9F900);?background: -o-linear-gradient(left,#FF0000, #F9F900);?background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));?}?</style>?</head>?<body>?<div class="test1">?垂直漸變?</div>?<div class="test2">?水平漸變?</div>?</body>?</html>?
轉(zhuǎn)載于:https://www.cnblogs.com/top5/archive/2012/02/14/2351960.html
總結(jié)
以上是生活随笔為你收集整理的兼容IE与firefox的css 线性渐变（linear-gradient）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： modelandview 可以返回htm
- 下一篇： 使用jQuery queue(队列) 遇