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 ...

随机推荐

jQuery的Autocomplete插件的远程url取json数据的问题
关于远程返回的json数据的展示,以前一样的代码,如果是本地写好的json串数据,插件显示就没有问题,一旦换成ulr方式读取一样的数据,插件就不能正常显示问题了. 今天偶然搜索资料找到一篇csdn上有 ...
Linux基础知识入门
[Linux基础]Linux基础知识入门及常见命令. 前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1: ...
an error occured during the file system check
打开虚拟机的时候,报错: 出错原因: 我之前修改了/etc/fstab文件, 原先/etc/fstab文件中有一行是这样的: LABEL=/i01 /u01 ...
DOM commend
var comment = document.createComment("commend content"); var elem = document.getElementByI ...
cf C. Valera and Elections
http://codeforces.com/contest/369/problem/C 先见边,然后dfs,在回溯的过程中,如果在这个点之后有多条有问题的边,就不选这个点,如果没有而且连接这个点的边还 ...
cf D. Pair of Numbers
http://codeforces.com/contest/359/problem/D 题意:给你n个数,然后找出在[l,r]中有一个数a[j],l<=j<=r,在[l,r]中的所有数都是 ...
开始慢慢学习这本书了。。Python编程实战：运用设计模式、并发和程序库创建高质量程序
没办法,不到设计模式,算法组合这些,在写大一点程序的时候,总是力不从心...:( 一开始可能要花很多时间来慢慢理解吧,,这毕竟和<大话设计模式>用的C#语言有点不太一样... 书上代码是3 ...
apache2 httpd 基于域名的虚拟主机配置 for centos6X 和debian-8
全系统虚拟主机: for debian 系统的apache2 域名虚拟主机
junit4测试 Spring MVC注解方式
本人使用的为junit4进行测试 spring-servlet.xml中使用的为注解扫描的方式 <?xml version="1.0" encoding="UTF- ...
细说php(六) 数组
一.数组概述 1.1 数组是复合类型 1.2 数组中能够存储随意长度的数据, 也能够存储随意类型的数据二.数组的类型 2.1 索引数组: 下标是顺序整数作为索引 <?php $user[0] ...

css3实现各种渐变效果，比较适合做手机触屏版

css3实现各种渐变效果，比较适合做手机触屏版的更多相关文章

随机推荐

热门专题