用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学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
matplotlib绘制动画代码示例
2018/01/02 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
详解django三种文件下载方式
2018/04/06 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
Python对excel的基本操作方法
2021/02/18 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
护士自我评价
2014/02/01 职场文书
美术教师自我鉴定
2014/02/12 职场文书
医院搬迁方案
2014/06/14 职场文书
单位作风建设自查报告
2014/10/23 职场文书
工程服务质量承诺书
2015/04/29 职场文书