一位优秀的UI设计师知道html能够做出哪些图形、图像的效果。所以，如果配合得好，UI切图会很少，很多界面效果前端都会用CSS来实现。
    
    我遇到过很多优秀的UI设计师。其中一位就很熟悉html能做出渐变底色、渐变边框、隔行底色等等效果。所以，他给的切图很少，基本上就是一张Banner的背景图、几张弹出窗的背景图和几张按钮的背景图。而，这些已经足够。我们配合做出来的页面不说是顶级至少也是精品中的精品。不论业务场景的应用是否有页面简练的必要，我们的页面大小就是精简极致。
    
    下面就简单介绍CSS实现的图像效果：
    1、中心渐变色背景，一般应用于标题栏的背景
    {
        background-image: radical-gradient(circle, lightyellow, darkyellow);
        background-repeat:norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    2、椭圆顶点渐变色背景，可用于标题栏等区域
    {
        background-image:  radical-gradient(ellipse farthest-corner at 0 0, lightyellow, darkyellow);
        background-repeat:norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    
    注意：html背景画的椭圆始终是正椭圆，也就是椭圆圆心与一个顶点就能确定一个椭圆的形状。
    
    radical-gradient渐变函数的第一个逗号之前包括：
    形状：circle / ellipse
    放射半径：closest-corner / closest-side / farthest-corner / farthest-side
    圆心位置：at （两个参数）像素值 / 百分比 /（left/right/center top/bottom/center）
    
    第一个逗号之后就是颜色，颜色后面可以跟渐变色的宽度百分比。
    
    3、线性渐变色背景，可用于栏目标题
    {
        background-image: linear-gradient(to right,yellow, rgba(10,10,255,0.3));
        background-repeat:norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    linear-gradient的第一个参数可以是to right / top / left / bottom（默认）/ top right / top left / bottom right / bottom left 以及角度（比如60deg）
    
    4、最炫的线性渐变色边框
    {
        border-width: 2px;
        border-style: solid;
        border-image-source: linear-gradient(to top, rgb(91, 230, 231), rgba(0, 240, 132 , 0.0));
        border-image-slice: 1;
    }

                                ————www.v-signon.com学习者共勉