css3 线性渐变和径向渐变示例附图


Posted in HTML / CSS onApril 08, 2014

线性渐变:ie6以下不兼容

径向渐变:只支持firefox、Chrome和Safari

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Background Color</title>
<style type="text/css">
* {
marigin:0;
padding:0;
}
div{
margin-bottom:20px;
width:300px;
height:100px;
}
.linear{/*线性渐变样式*/
background-color: #1FA9F4; /* Old browsers */
background-image: -moz-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1FA9F4), color-stop(100%,#001C4E)); /* Chrome,Safari4+ */
background-image: -o-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top,#1FA9F4 0%, #001C4E 100%); /* IE10+ */
background-image: linear-gradient(to bottom,#1FA9F4 0%, #001C4E 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1FA9F4', endColorstr='#001C4E',GradientType=0 ); /* IE6-8 */
}
.circle{/*径向渐变样式*/
background-color: #1FA9F4; /* Other browsers*/
background-image:-moz-radial-gradient(center 80px 45deg, circle farthest-corner, #1FA9F4 0%, #001C4E 100%); /* FF3.6+ */
background-image: -webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1))); /* Chrome,Safari4+ */
}
</style>
</head>
<body>
<div class="linear">
</div>
<div class="circle">
</div>
</body>
</html>

效果图:
css3 线性渐变和径向渐变示例附图
HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
You might like
php使用websocket示例详解
2014/03/12 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP7新功能总结
2019/04/14 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
javascript几个易错点记录
2014/11/26 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python实现画出e指数函数的图像
2019/11/21 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python操作链表的示例代码
2020/09/27 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
写好自荐信的要点
2013/11/06 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
房地产广告策划方案
2014/05/15 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL