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 ...
随机推荐
- python之7-3对象的信息/方法获取
我们可以用dir()来获取一个类,一个模块,一个字符串的信息/方法 例如: #可以列出Image模块的方法 >>import Image >>dir(Image) #列出字符串 ...
- WebApi上传图片 await关键字
await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...
- Hibernate学习笔记--Hibernate框架错误集合及解决
错误1:MappingException: Unknown entity解决方案 http://jingyan.baidu.com/article/e75aca8552761b142edac6cf.h ...
- zlog使用手册，小靠谱啊
http://hardysimpson.github.io/zlog/UsersGuide-CN.html Chapter 1 zlog是什么? zlog是一个高可靠性.高性能.线程安全.灵活.概念清 ...
- 关于炒股软件——金魔方炒股软件的Dll外挂开发
2015-01-19 14:40:04 金魔方平台是由飞狐交易师原创团队集多年研发经验,依靠和讯财经网强大资源,吸取国际专家思路而推出的十年巨作.目前新出的这个2.0版,这一版在数据存储方面作很大的改 ...
- 剑指offer中二进制中1的个数
容易想到的是将n一位一位的和1进行比较,产生如下代码 但是这样的话会出下面的问题 那么就是原数据不动,将1依次移动进行比较有如下的代码 一种更简单的方法是: 这样做的思路是 总而言之
- NGINX和PHP之间的环境变量传递
昨天遇到的,想将IP访问转换成域名访问.则NGINX需要将相关的变量转换后传递给PHP. 网上有一系统的方法: 前面讲过该不该把信息写在服务器配置文件里?.通过php扩展hidef来define常量, ...
- 关于NotePad++ v1.0的编译和源码分析
最近想读读开源项目,windows下的.文本编辑器是一个很好的选择,因为里面的很多技术,算法(字符串搜索,匹配等)都是被程序员实现过千万遍了,代码里面有很多精髓可以让我们这些菜鸟学学. 首先:下载源码 ...
- 【转】Install SmartGit via PPA in Ubuntu 13.10/13.04/12.04/Linux Mint
原文网址:http://ubuntuhandbook.org/index.php/2013/09/install-smartgit-via-ppa-ubuntu-linux-mint/ This tu ...
- 符号表实现（Symbol Table Implementations）
符号表的实现有很多方式,下面介绍其中的几种. 乱序(未排序)数组实现 这种情况,不需要改变数组,操作就在这个数组上执行.在最坏的情况下插入,搜索,删除时间复杂度为O(n). 有序(已排序)数组实现 这 ...