css3实现各种渐变效果，比较适合做手机触屏版
2013-08-21 15:32
411 查看
<!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>原文：/article/1214515.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动开发之css3实现背景几种渐变效果
- 实现各种 CSS3 文本动画效果
- css3 shadow为了实现各种漂亮的阴影效果
- 用css3实现各种图标效果（2）
- 详解CSS3中使用gradient实现渐变效果的方法
- CSS3中轻松实现渐变效果
- CSS3下的渐变文字效果实现
- 用css3实现各种图标效果
- CSS3下的渐变文字效果实现
- CSS3实现兼容性的渐变背景效果
- 用css3实现各种图标效果
- CSS3中轻松实现渐变效果
- 使用CSS3配合IE滤镜实现渐变和投影的效果
- 用css3实现各种图标效果（1）
- 极客编程小挑战＃30：用CSS3实现各种钟表的显示效果
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- CSS3中轻松实现渐变效果
- css3实现的多级渐变下拉菜单导航效果代码
- 用css3实现各种图标效果（2）
- css3实现字体渐变效果