设计渐变的背景之-webkit-gradient

-webkit-gradient 做一个渐变的背景




    
    Title
    


主要理解background这个下面的代码 

意思是  做线性渐变linear   从左上角到右下角  top left  / right bottom ,然后是from()  to ()  从绿色到粉红色的渐变,这样就可以形成一个渐变的背景了

如果需要三个渐变  那么用color-stop  是颜色的步长,就是增加了一个渐变在50%的地方,从顶部到中间  然后从中间到底部

有个小问题就是div定义的时候 w:200  h:200  这个是不包括boder 和padding的尺寸的 

如果div的w:200 ,border-width:3px  padding:10px  那么整个就是226px  这个是个之前没注意的问题  ,现在记下来


设计二重渐变




    
    Title
    


这个二重渐变其实多加了个color-stop

设计渐变的背景之-webkit-gradient_第1张图片




    
    Title
    


设计渐变的背景之-webkit-gradient_第2张图片



你可能感兴趣的:(Web前端)