css 3 linear-gradientグラデーション効果と互換性処理

5916 ワード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		    .gradient{
     
		      height:40px;
		      background: #A56697; 
		      background:-moz-linear-gradient(left,#CA5A83,#7E72AB);  
		      background:-webkit-linear-gradient(left,#CA5A83,#7E72AB);   
		      background: -o-linear-gradient(left,#CA5A83,#7E72AB); 
		      background: -ms-linear-gradient(left,#CA5A83,#7E72AB); 
		      background: linear-gradient(to right, #CA5A83 0%,#7E72AB 100%); 
		      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CA5A83',                        endColorstr='#7E72AB',GradientType=0 );   
		             :root .gradient{
     filter:none;} 
	        }
	    </style>
	</head>
	<body>
		<div class="gradient"></div>
	</body>
</html>