用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实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python读写ini文件的方法
2015/05/28 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python实现两个文件夹的同步
2019/08/29 Python
python通过链接抓取网站详解
2019/11/20 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
python 如何对logging日志封装
2020/12/02 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
三年级学生评语
2014/04/23 职场文书
行政申诉状范文
2015/05/20 职场文书