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 相关文章推荐
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python更改已存在excel文件的方法
2018/05/03 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Django的Modelforms用法简介
2019/07/27 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
PyTorch预训练的实现
2019/09/18 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python 贪心算法的实现
2020/09/18 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
社区宣传标语口号
2015/12/26 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis