• 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 {
	 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="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="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="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="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="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="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; 100%; border-bottom:dashed 2px #454545;"></div>

<!--第七种情况-->
<div style="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="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="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="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="500px; height:700px; float:left; margin-left:10px;">
<div class="toLeft_ourself" style="500px;"></div>
<div class="toRight_ourself" style="500px;"></div>
</div>

</body>
</html>

    　　

    原文：http://www.w3cplus.com/css3/new-css3-linear-gradient.html
  • 相关阅读:
    MySQL之LEFT JOIN中使用ON和WHRERE对表数据
    Mysql索引分类
    个人发展战略（二）
    个人发展战略（一）
    List的add方法与addAll方法的区别、StringBuffer的delete方法与deleteCharAt的区别
    职业理财规划
    Servlet简介与Servlet和HttpServlet运行的流程
    Ajax的get、post和ajax提交
    Ajax方法
    监听器随笔
  • 原文地址：https://www.cnblogs.com/csdttnk/p/3272783.html
Copyright © 2020-2023  润新知