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

CSS3——gradient渐变

2015-07-08 12:33 585 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg{
width:300px;
height:250px;
background-image:-webkit-gradient(linear,14% 48%,35% 0%,
from(#d86707),
color-stop(.5,#d86707),
color-stop(.5,transparent),
to(transparent)
),
-webkit-gradient(linear,48% 0,62% 35%,
from(#d86707),
color-stop(.5,#d86707),
color-stop(.5,transparent),
to(transparent)
);
background-size: 19px 10px;
background-repeat:repeat-y;
background-position:0 100%;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg{
width:300px;
height:250px;
background-image:-webkit-gradient(linear,50% 0,0 100%,
from(transparent),
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707)
),
-webkit-gradient(linear,50% 0,100% 100%,
from(transparent),
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707)
);
background-image:-moz-linear-gradient(50% 0,0 100%,
from(transparent),
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707)
),
-moz-linear-gradient(50% 0,100% 100%,
from(transparent),
color-stop(.5,transparent),
color-stop(.5,#d86707),
to(#d86707)
);
background-size: 19px 10px;
background-repeat:repeat-x;
background-position:0 100%;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航