css3线性渐变linear-gradient角度渐变
的有关信息介绍如下:
css3线性渐变linear-gradient角度渐变
新建文件,创建div背景渐变角度是0
效果预览
div背景渐变角度是45
效果预览
div背景渐变角度是90
效果预览
div背景渐变角度是180
效果预览
div背景渐变角度是-90
效果预览
附上源码
div{ margin-top:20px;}
.div1{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient(0deg, #0CF , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(0deg, #0CF, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(0deg, #0CF, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(0deg,#0CF, blue);
}
.div2{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient(45deg, #0CF , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(45deg, #0CF, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(45deg, #0CF, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(45deg,#0CF, blue);
}
.div3{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient(90deg, #0CF , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(90deg, #0CF, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(90deg, #0CF, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(90deg,#0CF, blue);
}
.div4{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient(180deg, #0CF , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, #0CF, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, #0CF, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg,#0CF, blue);
}
.div5{
width:400px; height:200px;
background:#fff;
background: -webkit-linear-gradient(-90deg, #0CF , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, #0CF, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, #0CF, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg,#0CF, blue);
}

