用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 17 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
html form表单基础入门案例讲解
Jul 15 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中的动态调用实例分析
2015/01/07 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Maps Javascript
2007/01/22 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
python中的字典详细介绍
2014/09/18 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python处理RSTP视频流过程解析
2020/01/11 Python
使用Python构造hive insert语句说明
2020/06/06 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
开工仪式策划方案
2014/05/23 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
幼儿教师个人总结
2015/02/05 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书