本文介绍了一种使用CSS来创建从顶部到底部的渐变背景效果的方法。通过使用不同浏览器的线性渐变属性，实现了从浅蓝到深蓝的渐变色块，并确保了在各种浏览器中的兼容性。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 0 auto;
background: -webkit-linear-gradient(top,#8aeaee 0,#0db5b3 100%);
background: -moz-linear-gradient(top,#8aeaee 0,#0db5b3 100%);
background: -o-linear-gradient(top,#6db8bb 0,#0db5b3 100%);
background: linear-gradient(to bottom,#8aeaee 0,#0db5b3 100%);
background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#8aeaee,endColorstr=#0db5b3,GradientType=0);
}
</style>
</head>
<body>
<div>
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 0 auto;
background: -webkit-linear-gradient(top,#8aeaee 0,#0db5b3 100%);
background: -moz-linear-gradient(top,#8aeaee 0,#0db5b3 100%);
background: -o-linear-gradient(top,#6db8bb 0,#0db5b3 100%);
background: linear-gradient(to bottom,#8aeaee 0,#0db5b3 100%);
background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#8aeaee,endColorstr=#0db5b3,GradientType=0);
}
</style>
</head>
<body>
<div>
</div>
/*效果如下图*/
<script></script>
</body>
</html>
扫一扫
1060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
