关于CSS3线型渐变这些事儿

时间：2021-03-04 03:52:44

CSS3兼容各浏览器的线型渐变方法：

<!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>

<meta charset="utf-8">

<title>线性渐变（linear-gradient）</title>

<style type="text/css">

.gradient{

background: #000000;

background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));

background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);

background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

}

:root .gradient{filter:none;}

</style>

</head>

<body>

<div class="gradient">

垂直渐变

</div> 

</body>

</html>

如下图所示：

关于CSS3线型渐变这些事儿

兼容IE哟~~

相关文章