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

CSS渐变色

2015-11-20 22:51 351 查看

一. Webkit浏览器

.xSelector{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));}


第一个参数：表示的是渐变的类型
第二个参数：分别对应x，y方向渐变的起始位置
第三个参数：分别对应x，y方向渐变的终止位置
第四个参数：设置了起始位置的颜色
第五个参数：设置了终止位置的颜色

二.Mozilla浏览器

.xSelector{background:-moz-linear-gradient(top, #FF82AB, #FFA07A);}


第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色

三.IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现

.xSelector{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1);}


第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型,0 代表竖向渐变,1 代表横向渐变

最后写在一起就是如下代码

<!DOCTYPE html>
<html>
<head>
<title>gradient</title>
<style>
body{
background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));
background:-moz-linear-gradient(top, #FF82AB, #FFA07A);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF82AB, endColorstr=#FFA07A, grandientType=1);
}
</style>
</head>
<body></body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航