css Gradients(渐变)
2016-01-19 12:24
579 查看
渐变分为4类
1:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
2:径向渐变(Radial Gradients)- 由它们的中心定义
3:对角渐变
4:角度渐变
以下是我写的代码
div{float: left;width: 100px;height:100px;}
.odiv1{
background:-moz-linear-gradient(red,blue);
background:-webkit-linear-gradient(red,blue);
background:-ms-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:linear-gradient(red,blue);/*线性渐变默认情况下是从上到下*/
}
.odiv2{
background:-moz-radial-gradient(red,blue);
background:-webkit-radial-gradient(red,blue);
background:-ms-radial-gradient(red,blue);
background:-o-radial-gradient(red,blue);
background: radial-gradient(red,blue);/*径向渐变*/
}
.odiv3{/* 标准的语法(必须放在最后) */
background:-webkit-linear-gradient(right,red,blue);
background:-moz-linear-gradient(right,red,blue) ;
background:-ms-linear-gradient(right,red,blue);
background:-o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);/*从右向左渐变*/
}
.odiv4{/*对角渐变左上角開始(到右下角)的线性渐变*/
background: -webkit-linear-gradient(left top,red,blue);
background:-moz-linear-gradient(bottom right,red,blue);
background: -ms-linear-gradient(bottom right,red,blue);
background: -o-linear-gradient(bottom right,red,blue);
background:linear-gradient(to bottom right,red,blue);
}
.odiv5{/*以60度进行的渐变*/
background:-webkit-linear-gradient(60deg,red,blue);
background:-moz-linear-gradient(60deg,red,blue) ;
background:-ms-linear-gradient(60deg,red,blue);
background:-o-linear-gradient(60deg,red,blue);
background:linear-gradient(60deg,red,blue);
}
<div class="odiv1"></div>
<div class="odiv2"></div>
<div class="odiv3"></div>
<div class="odiv4"></div>
<div class="odiv5"></div>
高手勿喷啊!
1:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
2:径向渐变(Radial Gradients)- 由它们的中心定义
3:对角渐变
4:角度渐变
以下是我写的代码
div{float: left;width: 100px;height:100px;}
.odiv1{
background:-moz-linear-gradient(red,blue);
background:-webkit-linear-gradient(red,blue);
background:-ms-linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:linear-gradient(red,blue);/*线性渐变默认情况下是从上到下*/
}
.odiv2{
background:-moz-radial-gradient(red,blue);
background:-webkit-radial-gradient(red,blue);
background:-ms-radial-gradient(red,blue);
background:-o-radial-gradient(red,blue);
background: radial-gradient(red,blue);/*径向渐变*/
}
.odiv3{/* 标准的语法(必须放在最后) */
background:-webkit-linear-gradient(right,red,blue);
background:-moz-linear-gradient(right,red,blue) ;
background:-ms-linear-gradient(right,red,blue);
background:-o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);/*从右向左渐变*/
}
.odiv4{/*对角渐变左上角開始(到右下角)的线性渐变*/
background: -webkit-linear-gradient(left top,red,blue);
background:-moz-linear-gradient(bottom right,red,blue);
background: -ms-linear-gradient(bottom right,red,blue);
background: -o-linear-gradient(bottom right,red,blue);
background:linear-gradient(to bottom right,red,blue);
}
.odiv5{/*以60度进行的渐变*/
background:-webkit-linear-gradient(60deg,red,blue);
background:-moz-linear-gradient(60deg,red,blue) ;
background:-ms-linear-gradient(60deg,red,blue);
background:-o-linear-gradient(60deg,red,blue);
background:linear-gradient(60deg,red,blue);
}
<div class="odiv1"></div>
<div class="odiv2"></div>
<div class="odiv3"></div>
<div class="odiv4"></div>
<div class="odiv5"></div>
高手勿喷啊!
相关文章推荐
- css visibility和display属性区别
- CSS3一般媒体查询
- 详解CSS position属性
- CSS中常见的BUG调试
- google官方教程 展示如何自定义可选择列表项样式。
- 自定义Toast样式
- Angular根据获取值不同给不同的样式
- CSS cursor属性(w3school)
- 刷新页面更换CSS样式表-对网上document.write方式的修正
- CSS常用属性之段落
- CSS常用属性之文字样式
- 去掉segMentedControl的边框和改变选中字体的样式
- JS获取CSS样式(style/getComputedStyle/currentStyle)
- CSS导航下拉菜单被JS幻灯片挡住的…
- CSS3之动画
- 《css设计指南》 读书笔记 二
- 好玩的CSS点点
- CSS实现单行、多行文本溢出显示省略号(…)
- 移动平台对 META 标签的定义
- 《css设计指南》 读书笔记 一