Summary of how to use the linear-gradient attribute in CSS3

This article brings you a summary of how to use the linear-gradient attribute in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Linear-gradient is an important property in CSS3. It seems very simple at first glance, but don’t look at it simple, it can realize many complex graphics.

The code is relatively simple:

linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),
linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent)

But it still requires a certain foundation to understand.

linear gradient linear-gradient

Basic usage

background-image: linear-gradient(red, yellow, blue, green); 
background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);

Control the direction of the color gradient (right, left, top, bottom)

/*
    控制颜色渐变的方向
    to right -- 从左向右
    to top -- 从下到上
    to left -- 从右到左
    to bottom --- 从上到下（默认值）
*/
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);

Control the direction of the color gradient (deg)

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);

Control the direction of the color gradient (deg)

/*设置过渡颜色的起始位置*/
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);

Repeating linear gradient: repeating-linear-gradient

background-image: linear-gradient(to right
, red 0
, red 50px
, yellow 50px
, yellow 100px
, red 100px
, red 150px
, yellow 150px
, yellow 200px);
/**与上面重复写渐变有相同的效果*/
background-image: repeating-linear-gradient(
        to right
        , red 0
        , red 50px
        , yellow 50px
        , yellow 100px
);

Related recommendations:

How to use CSS3’s linear-gradient linear gradient

Sample code sharing for making borders using CSS3’s linear-gradient linear-gradient

The above is the detailed content of Summary of how to use the linear-gradient attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!