An excellent UI designer knows what graphic and image effects HTML can produce. So, if well cooperated, there will be very few UI cut-outs, and many front-end interface effects will be implemented using CSS.
        
    I have co-colleagued many excellent UI designers. One of them is very familiar with HTML which can create effects such as gradient backgrounds, gradient borders, and interlaced backgrounds. So, he gave very few cut-out images, basically just a background image of a banner, several background images of pop-up windows, and several background images of buttons. And these are already sufficient for the web page. The pages we collaborated to create are not only top-notch, but also be the finest in the world. Regardless of whether there is a neccessary for concise pages in business scenarios, the size of our page is the ultimate small.
        
    Below is a brief introduction to the image effects implemented by CSS:
    
    1. Center gradient background, generally applied to the background of the title bar
    {
        background-image: radical-gradient(circle,  lightyellow, darkyellow);
        background-repeat: norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    
    
    2. Elliptical vertex gradient background, can be used in areas such as title bars
    {
        background-image:  radical-gradient(ellipse farthest-corner at 0 0,  lightyellow, darkyellow);
        background-repeat: norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    
        
    Note: The ellipse drawn in the HTML background is always a regular ellipse, which means that the shape of an ellipse can be determined by the center of the ellipse and one vertex.
        
    The first comma before the radical gradient function includes:
    Shape: circle/ellipse
    Radiation radius: closed-corner/closed-side/farthest-corner/farthest-side
    Center position: at (two parameters) pixel value/percentage/( left/right/center     top/bottom/center )
        
    After the first comma, that is the color, which can be followed by the width percentage of the gradient color.
        
    3. Linear gradient background, can be used for column titles
    {
        background-image: linear-gradient(to right,yellow, rgba(10,10,255,0.3));
        background-repeat: norepeat;
        background-position: center center;
        background-size: 100% 100%;
    }
    
    
    The first parameter of linear gradient can be 'to right/top/left/bottom(default)/top right/top left/bottom right/bottom left', as well as the angle (e.g. 60deg)
        
    4. The coolest linear gradient border
    {
        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 Learner Encouragement