用CSS3实现背景渐变的方法


Posted in HTML / CSS onJuly 14, 2015

CSS3 之前,必须依赖 Adobe Photoshop 等图形处理软件来制作渐变图,再以背景图片方式添加给元素。 而现在, 使用 CSS就可以创造出各种渐变效果了。渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性

CSS Code复制内容到剪贴板
  1. <div class='gradient1'></div>    
  2. <div class='gradient2'></div>    
  3. <div class='gradient3'></div>   

CSS 规则如下。

CSS Code复制内容到剪贴板
  1. /*为元素盒子添加样式*/    
  2. div {    
  3.  height:150px;    
  4.  width:200px;    
  5.  border:1px solid #ccc;    
  6.  float:left;    
  7.  margin:16px;    
  8. }    
  9.   
  10. /*例 1:默认为从上到下*/    
  11. .gradient1 {    
  12.  background:linear-gradient(#e86a43#fff);    
  13. }    
  14.   
  15. /*例 2:从左到右*/    
  16. .gradient2 {    
  17.  background:linear-gradient(left#64d1dd#fff);    
  18. }    
  19.   
  20. /*例 3:左上到右下*/    
  21. .gradient3 {    
  22.  background:linear-gradient(-45deg, #e86a43#fff);    
  23. }   

放射性渐变

在创建放射性渐变时,可以使用参数指定形状、位置、尺寸、颜色和不透明度

CSS Code复制内容到剪贴板
  1. .gradient1 {    
  2.  background: -webkit-radial-gradient(#fff#64d1dd#70aa25);    
  3. }    
  4. .gradient2 {    
  5.  background: -webkit-radial-gradient(circle#fff#64d1dd#e86a43);    
  6. }    
  7. .gradient3 {    
  8.  background: -webkit-radial-gradient(50px 30pxcircle#fff#64d1dd,    
  9. #4947ba);    
  10. }   

HTML / CSS 相关文章推荐
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 #HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 #HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python读取二进制mnist实例详解
2017/05/31 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
应届生求职推荐信
2013/10/28 职场文书
同事吵架检讨书
2014/02/05 职场文书
岗位廉政承诺书
2014/03/27 职场文书
企业党员个人自我评价
2014/09/20 职场文书
运动会广播稿50字
2015/08/19 职场文书
医学会议开幕词
2016/03/03 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
SQL Server 中的事务介绍
2022/05/20 SQL Server