day14 渐变 倒影 背景

线性渐变

css：

.box{

        background-image:linear-gradient(red,yellow)

}

向右进行渐变

.box{

        background-image:linear-gradient(to right,red,yellow)

}

向右上角进行渐变

.box{

        background-image:linear-gradient(to top right,red,yellow)

}

颜色可以加多个，渐变是100px开始到200px结束

.box{
    background-image:linear-gradient(to right,red 100px,blue 200px)
}

还可以用%代替

.box{
    background-image:linear-gradient(to right,red 10%,blue 20%)
}

渐变重复平铺

.box{
    background-image:repeating-linear-gradient(to right,red 10px,blue 20px)
}

透明transparent，可以增加透明的网格

.box{
    background-image:repeating-linear-gradient(to right,red 10px,blue 20px,transparent 60px,transparent 40px)
}

径向渐变 变成圆

.box{
    width:400px;
    height:400px;
    background-image:radial-gradient(red,blue);
}

圆心到最近的边 closest-side at 100px 100px

.box{
    background-image:radial-gradient(closest-side at 100px 100px,red,blue);
}

圆心到最远的边 farthesr-side at 

.box{
    background-image:radial-gradient(farthest-side at 100px 100px,red,blue);
}

圆心到最近的角

.box{
    background-image:radial-gradient(closest-corner at 100px 100px,red,blue);
}

圆心到最远的角

.box{
    background-image:radial-gradient(farthest-corner at 100px 100px,red,blue);
}

at 后边两个值  第一个值和第二个值距离边的距离相等是圆 不一样是椭圆

直接加circle属性直接是圆

圆的平铺

.box{
    width:400px;
    height:400px;
    background-image:repeat-radial-gradient(blue 10px,green 50px);
}

图片倒影

css中

-webkit-box-reflect:above上  below下  left左 right右

-webkit-box-reflect:left 30px;

-webkit是让浏览器兼容这个css   30px是原图和倒影间的距离

倒影可以和渐变结合

多背景样式

background:url() no-repeat right top/330px 300px,url() no-repeat right bottom;

多背景图片复核形式