用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 04 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
php二维码生成以及下载实现
2017/09/28 PHP
围观tangram js库
2010/12/28 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python练习程序批量修改文件名
2014/01/16 Python
多版本Python共存的配置方法
2017/05/22 Python
python 连接sqlite及简单操作
2017/06/30 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python实战之制作天气查询软件
2019/05/14 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
2014年保密工作总结
2014/11/22 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
离婚上诉状范文
2015/05/23 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android