用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实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 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
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP中each与list用法分析
2016/01/08 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
PHP7 新增功能
2021/03/09 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python程序如何进行保存
2020/07/03 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年考研复习计划
2015/01/19 职场文书
计算机教师工作总结
2015/08/13 职场文书
护理自荐信
2019/05/14 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript