用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 特效范例整理
Aug 22 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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.MVC的模板标签系统(三)
2006/09/05 PHP
php.ini中文版
2006/10/09 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
判断单链表中是否存在环
2012/07/16 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
体育学院毕业生自荐信
2013/11/03 职场文书
机关财务管理制度
2014/01/17 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
室内趣味活动方案
2014/08/24 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
学校党支部承诺书
2015/04/30 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript