用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 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 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实现活动人选抽奖功能
2017/04/19 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python读取stdin方法实例
2019/05/24 Python
Python笔试面试题小结
2019/09/07 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Python打印不合法的文件名
2020/07/31 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
体育比赛口号
2014/06/09 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
党员违纪检讨书
2015/05/05 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
《山中访友》教学反思
2016/02/24 职场文书