用css实现背景渐变

最新推荐文章于 2023-03-15 22:22:06 发布

NotBad_1

最新推荐文章于 2023-03-15 22:22:06 发布

阅读量734

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/NotBad_/article/details/52315761

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css3：linear-gradient

比如：黑色变成白色

.gradient{

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%);

}

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()详解-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
div{width:200px;height:100px;margin-top:10px;border:1px solid #ddd;}
.test{

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

background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));

background:-webkit-linear-gradient(#fff,#333);

background:-o-linear-gradient(#fff,#333);

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

background:linear-gradient(#fff,#333);}
.test2{background:-moz-linear-gradient(#000,#f00 50%,#090);background:-webkit-gradient(linear,center top,center bottom,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(#000,#f00 50%,#090);background:-o-linear-gradient(#000,#f00 50%,#090);background:-ms-linear-gradient(#000,#f00 50%,#090);background:linear-gradient(#000,#f00 50%,#090);}
.test3{background:-moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);background:-webkit-gradient(linear,left center,right center,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090));background:-webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:-ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);background:linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);}
.test4{background:-moz-linear-gradient(45deg,#000,#f00 50%,#090);background:-webkit-gradient(linear,left bottom,right top,from(#000),color-stop(.5,#f00),to(#090));background:-webkit-linear-gradient(45deg,#000,#f00 50%,#090);background:-o-linear-gradient(45deg,#000,#f00 50%,#090);background:-ms-linear-gradient(45deg,#000,#f00 50%,#090);background:linear-gradient(45deg,#000,#f00 50%,#090);}
</style>
</head>
<body>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>

效果图：