css3实现各种渐变效果，比较适合做手机触屏版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渐变在苹果浏览器和谷歌浏览器下的差异</title>
<style type="text/css">
* {
list-style: none;
margin: 0;
padding: 0;
} div {
width: 300px;
height: 150px;
/*border: 1px solid #666;*/
line-height: 150px;
text-align: center;
font-weight: 900;
font-size: 20px;
color: #000;
margin: 10px auto;
border-radius: 5px;
}
/*第一种情况：颜色从顶部向底部渐变（Top → Bottom）*/
.toTop{
/*background: -webkit-gradient(linear, left top, 0 100%, from(red), to(blue));*/
background-image:-webkit-linear-gradient(to top, orange, green);
background-image:linear-gradient(to top,orange,green);
/*border-radius: 5px;*/
} .toTop-deg{
background-image:-webkit-linear-gradient(0deg, orange, green);
background-image:linear-gradient(0deg,orange,green);
}
.toTop-deg2{
background-image:-webkit-linear-gradient(360deg, orange, green);
background-image:linear-gradient(360deg,orange,green);
}
.toTop-deg3 {
background-image:-webkit-linear-gradient(-360deg, orange, green);
background-image:linear-gradient(-360deg,orange,green);
}
/*第二种情况：颜色从底部向顶部渐变（bottom→top）*/
.toBottom {
background-image:-webkit-linear-gradient(to bottom, orange, green);
background-image:linear-gradient(to bottom,orange,green);
}
.toBottom-deg1{
background-image:-webkit-linear-gradient(180deg, orange, green);
background-image:linear-gradient(180deg,orange,green);
}
.toBottom-deg2{
background-image:-webkit-linear-gradient(-180deg, orange, green);
background-image:linear-gradient(-180deg,orange,green);
}
/*第三种情况：颜色从左向右渐变（left→right）*/
.toLeft {
background-image:-webkit-linear-gradient(to left, orange, green);
background-image:linear-gradient(to left,orange,green);
}
.toLeft-deg1{
background-image:-webkit-linear-gradient(-90deg, orange, green);
background-image:linear-gradient(-90deg,orange,green);
}
.toLeft-deg2{
background-image:-webkit-linear-gradient(270deg, orange, green);
background-image:linear-gradient(270deg,orange,green);
}
/*第四种情况：颜色从右向左渐变（right→left）*/
.toRight {
background-image:-webkit-linear-gradient(to right, orange, green);
background-image:linear-gradient(to right,orange,green);
}
.toRight-deg1{
background-image:-webkit-linear-gradient(90deg, orange, green);
background-image:linear-gradient(90deg,orange,green);
}
.toRight-deg2{
background-image:-webkit-linear-gradient(-270deg, orange, green);
background-image:linear-gradient(-270deg,orange,green);
}
/*第五种情况：从右下角向左上角:主要实现从右下角向左上角线性渐变。也就是第一颜色“orange”从右下角向左上角的第二颜色（green）实现线性渐变。*/
.toTopLeft {
background-image:-webkit-linear-gradient(to top left, orange, green);
background-image:linear-gradient(to top left,orange,green);
}
.toTopLeft-deg1{
background-image:-webkit-linear-gradient(315deg, orange, green);
background-image:linear-gradient(315deg,orange,green);
}
.toTopLeft-deg2{
background-image:-webkit-linear-gradient(-45deg, orange, green);
background-image:linear-gradient(-45deg,orange,green);
}
/*第六种情况：从左下角到右上角线性渐变，to top right”关键词实现左下角到右上角的线性渐变。也就是第一颜色“orange”从左下角向右上角第二颜色（green）渐变。*/
.toTopRight {
background-image:-webkit-linear-gradient(to top right, orange, green);
background-image:linear-gradient(to top right,orange,green);
}
.toTopRight-deg1{
background-image:-webkit-linear-gradient(45deg, orange, green);
background-image:linear-gradient(45deg,orange,green);
}
.toTopRight-deg2{
background-image:-webkit-linear-gradient(-315deg, orange, green);
background-image:linear-gradient(-315deg,orange,green);
}
/*第七种情况：
从右上角到左下角线性渐变“to bottom left”关键词实现了右上角向左下角直线渐变，也就是第一颜色（orange）从右上角向左下角第二颜色（green）渐变。*/
.toBottomLeft {
background-image:-webkit-linear-gradient(to bottom left, orange, green);
background-image:linear-gradient(to bottom left,orange,green);
}
.toBottomLeft-deg1{
background-image:-webkit-linear-gradient(225deg, orange, green);
background-image:linear-gradient(225deg,orange,green);
}
.toBottomLeft-deg2{
background-image:-webkit-linear-gradient(-135deg, orange, green);
background-image:linear-gradient(-135deg,orange,green);
}
/*第八种情况：从左上角向右下角线性渐变
to bottom right”关键词实现了左上角向右下角直线渐变，也就是第一颜色（orange）从左上角向右下角的第二颜色（green）渐变。
*/
.toBottomRight {
background-image:-webkit-linear-gradient(to bottom right, orange, green);
background-image:linear-gradient(to bottom right,orange,green);
}
.toBottomRight-deg1{
background-image:-webkit-linear-gradient(135deg, orange, green);
background-image:linear-gradient(135deg,orange,green);
}
.toBottomRight-deg2{
background-image:-webkit-linear-gradient(-225deg, orange, green);
background-image:linear-gradient(-225deg,orange,green);
} /*其他情况*/
/*向左上角渐变*/
.toTopLeft {
background-image:-webkit-linear-gradient(to top left, orange, green);
background-image:linear-gradient(to top left,orange,green);
}
.toLeftTop {
background-image:-webkit-linear-gradient(to left top, orange, green);
background-image:linear-gradient(to left top,orange,green);
}
/*向右上角渐变*/
.toTopRight{
background-image:-webkit-linear-gradient(to top right, orange, green);
background-image:linear-gradient(to top right,orange,green);
}
.toRightTop {
background-image:-webkit-linear-gradient(to right top, orange, green);
background-image:linear-gradient(to right top,orange,green);
}
/*向左下角渐变*/
.toBottomLeft {
background-image:-webkit-linear-gradient(to bottom left, orange, green);
background-image:linear-gradient(to bottom left,orange,green);
}
.toLeftBottom {
background-image:-webkit-linear-gradient(to left bottom, orange, green);
background-image:linear-gradient(to left bottom,orange,green);
}
/*向右下角渐变*/
.toBottomRight {
background-image:-webkit-linear-gradient(to bottom right, orange, green);
background-image:linear-gradient(to bottom right,orange,green);
}
.toRightBottom {
background-image:-webkit-linear-gradient(to right bottom, orange, green);
background-image:linear-gradient(to right bottom,orange,green);
}
/*多线性渐变*/
.toLeft_our {
background-image:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
}
.toRight_our {
background-image:-webkit-linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}
.toTop_our {
background-image:-webkit-linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);
}
.toBottom_our {
background-image:-webkit-linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);
background-image:linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);
}
/*自定义线性渐变*/
.toLeft_ourself {
background-image:-webkit-linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
background-image:linear-gradient(
to left,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
}
.toRight_ourself {
background-image:-webkit-linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
background-image: linear-gradient(
to right,
rgba(255,0,0,0) 0%,
rgba(255,0,0,0.8) 7%,
rgba(255,0,0,1) 11%,
rgba(255,0,0,1) 12%,
rgba(255,252,0,1) 28%,
rgba(1,180,7,1) 45%,
rgba(0,234,255,1) 60%,
rgba(0,3,144,1) 75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
}
</style>
</head> <body>
<!--第一种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toTop">使用关键字 to-top</div>
<div class="toTop-deg">使用角度：0deg</div>
<div class="toTop-deg2">使用角度：360deg</div>
<div class="toTop-deg3">使用角度：-360deg</div>
</div> <!--第二种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toBottom">使用关键字 to-bottom</div>
<div class="toBottom-deg1">使用角度：180deg</div>
<div class="toBottom-deg2">使用角度：-180deg</div>
</div> <!--第三种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toLeft">使用关键字 to-left</div>
<div class="toLeft-deg1">使用角度：-90deg</div>
<div class="toLeft-deg2">使用角度：270deg</div>
</div>
<!--第四种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toRight">使用关键字 to-left</div>
<div class="toRight-deg1">使用角度：90deg</div>
<div class="toRight-deg2">使用角度：-270deg</div>
</div> <!--第五种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toTopLeft">使用关键字toTopLeft</div>
<div class="toTopLeft-deg1">使用角度：315deg</div>
<div class="toTopLeft-deg2">使用角度：-45deg</div>
</div>
<!--第六种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toTopRight">使用关键字toTopLeft</div>
<div class="toTopRight-deg1">使用角度：45deg</div>
<div class="toTopRight-deg2">使用角度：-315deg</div>
</div> <div style="height:10px; clear:both; width:100%; border-bottom:dashed 2px #454545;"></div> <!--第七种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toBottomLeft">使用关键字toBottomLeft</div>
<div class="toBottomLeft-deg1">使用角度：225deg</div>
<div class="toBottomLeft-deg2">使用角度：-135deg</div>
</div> <!--第八种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toBottomRight">使用关键字toBottomLeft</div>
<div class="toBottomRight-deg1">使用角度：225deg</div>
<div class="toBottomRight-deg2">使用角度：-135deg</div>
</div>
<!--第九种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toTopLeft"></div>
<div class="toLeftTop"></div>
<div class="toTopRight"></div>
<div class="toRightTop"></div>
<div class="toBottomLeft"></div>
<div class="toLeftBottom"></div>
<div class="toBottomRight"></div>
<div class="toRightBottom"></div>
</div>
<!--第九种情况-->
<div style="width:300px; height:700px; float:left; margin-left:10px;">
<div class="toLeft_our"></div>
<div class="toRight_our"></div>
<div class="toTop_our"></div>
<div class="toBottom_our"></div>
</div> <!--第十种情况-->
<div style="width:500px; height:700px; float:left; margin-left:10px;">
<div class="toLeft_ourself" style="width:500px;"></div>
<div class="toRight_ourself" style="width:500px;"></div>
</div> </body>
</html>
原文：http://www.w3cplus.com/css3/new-css3-linear-gradient.html
css3实现各种渐变效果，比较适合做手机触屏版的更多相关文章
- 解决电脑访问Discuz!手机版（支持触屏版）
discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- HTML5学习总结-09 拖放和手机触屏事件
一 拖放 拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 ht ...
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 手机触屏的js事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // ...
- 手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明
by 郑州seo on 2013 年 7 月 6 日 in jquery, 网站建设 with 6 Comments 最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核 ...
- 将 Discuz X3 手机版默认的“标准版”改为“触屏版”
修改前请备份原文件 1.找到“\source\class\discuz\discuz_application.php”,将其中的 'mobiletpl' => array('1' =&g ...
- jQuery手机触屏左右滑动切换焦点图特效代码
原文地址:http://www.17sucai.com/pins/4857.html 演示地址:http://www.17sucai.com/pins/demoshow/4857 干净演示地址:htt ...
- Mobiscroll手机触屏日期选择器
最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhon ...
随机推荐
- pure.css 学习记录
兼容性记录: IE 8+ Latest Stable: Firefox, Chrome, Safari iOS 6-8 Android 4.x 处理兼容性 <!--[if lte IE 8]&g ...
- 自制单片机之七……RS232串口
在我的板子上其它的部分都已完成了,现在就剩下RS232串口了.串口对于单片机很重要,有了它就可以和PC通信了,可以用PC来控制你的单片机,也可以将你单片机上采集的数据传到PC上. 留的位置好像有点挤. ...
- [转]RegOpenKeyEx函数失败的问题
在使用这个函数RegOpenKeyEx的时候,老是执行不成功,函数本身返回2,GetLastError返回0.在CSDN上查阅资料说是返回2的原因是注册表中对应路径不存在,可是我电脑中注册表那个键值明 ...
- list排序成员函数对string对象与char*对象排序的差别
对list容器中的对象排序,不能使用sort()算法,只能采用其自身的排序函数sort().因为,算法sort()只支持随机存取的容器的排序,如vector等. 对基本数据对象list排序:成员函数s ...
- Android Toast简介
Toast是Android中一种提供给用户简短信息的视图,该视图已浮于应用程序之上的形式呈现给用户.因为它并不获得焦点,即使用户正在输入什么也不会受到影响.它的目标是尽可能以不显眼的方式,使用户看到你 ...
- C/C++捕获段错误，打印出错的具体位置(精确到哪一行)
修订:2013-02-16 其实还可以使用 glibc 的 backtrace_symbols 函数,把栈帧各返回地址里面的数字地址翻译成符号描述的 修订:2011-06-11 背景知识: · 在li ...
- JAVA并发实现四（守护线程和线程阻塞）
守护线程 Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) 用户线程即运行在前台的线程,而守护线程是运行在后台的线程. 守护线程作用是为其他前台 ...
- jdbc调用mysql存储过程实现代码带有输入和输出
转载自 http://www.jb51.net/article/34747.htm 1. 创建存储过程 建立一个MySQL的存储过程 add_pro 复制代码代码如下: delimiter // dr ...
- MVC 校验
校验保障了MVC 应用程序安全性. Models 文件夹包含表示应用程序模型的类 1,创建一个项目MvcValidateDemo. 2,创建一个实体类UserInfo在Models中,包含Id.Use ...
- (转)Android中截取当前屏幕图片
该篇文章是说明在Android手机或平板电脑中如何实现截取当前屏幕的功能,并把截取的屏幕保存到SDCard中的某个目录文件夹下面.实现的代码如下: /** * 获取和保存当前屏幕的截图 */ priv ...