您的位置：首页 > Web前端 > CSS

用css实现背景渐变

2016-08-25 16:28 691 查看

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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航