登录  /  注册
首页 > web前端 > css教程 > 正文

使用css3实现背景渐变方法

高洛峰
发布: 2017-03-28 17:34:41
原创
3657人浏览过

在没有了解css也可以做背景渐变以前,我都是通过ps一张背景渐变的图片来应用到自己所做的网页中。然而,在前不久我了解到css3也可以做背景渐变后,想要做背景渐变的效果就很容易了许多,下面是一些css3做背景渐变的方法。 

一.线性渐变

//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}
登录后复制
//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}
登录后复制

第一个参数是渐变开始的方向,后面不需跟渐变结束方向;渐变的方向看可以是自上而下,也可以是从左往右;

第二个参数是渐变开始的颜色;

第三个参数是渐变结束的颜色。

 

二.加入stop()函数的线性渐变

p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}
登录后复制

 上面代码的意思是:从左15%处,到50%处,再到85%处,最后到右边,颜色渐变的顺序为blue到#1a82f7, #2F2727, #1a82f7再到red。

 

三.径向渐变(从圆心到圆外)

p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}
登录后复制

上面代码的意思是:一个颜色从blue到red的,从圆心向外围扩散的径向渐变。

如果参数circle换为ellipse,则为椭圆形的径向渐变。

 

四.正对IE浏览器的背景渐变

IE浏览器实现渐变只能使用IE自己的滤镜来实现。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
登录后复制

第一个参数:渐变起始位置的颜色;

第二个参数:渐变终止位置的颜色;

第三个参数:渐变的类型,0代表竖向渐变,1代表横向渐变。

注意:IE浏览器的背景渐变设置不需要给background设置,直接使用filter即可。

 

虽然css3的背景渐变功能强大,但也存在浏览器兼容性问题。目前css3背景渐变属性的具体支持情况为:IE10,FireFox3.6+,Safari4.0+,Chrome,Opera11.1(暂不支持径向渐变)+,IOS 3.2+,Opera Mobile11.1,Android。因此我们在运用css3做背景渐变时需要注意浏览器兼容性这一点。

以上就是使用css3实现背景渐变方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号