用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制作动感导航条示例
Jan 26 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php之curl设置超时实例
2014/11/03 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Python全排列操作实例分析
2018/07/24 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python实现取余操作的简单实例
2020/08/16 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
期中考试后的反思
2014/02/08 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
银行授权委托书样本
2014/10/13 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js