How to use linear-gradient linear gradient in CSS3

This time I will bring you how to use CSS3's linear-gradient linear gradient. Using CSS3's linear-gradient linear gradientWhat are the precautions?The following is a practical case, let's take a look.

In the mall project, the shopping cart is a very important function. The most common one is the "+-" operation on inventory in the shopping cart, including snap buying, which has many algorithms behind it. But as a front-end, the +- in the shopping cart settlement is just a calculation. The traditional implementation method is to implement the +- button through pictures, but this article will use CSS3’s linear-gradient linear gradient to implement the addition and subtraction operations of the shopping cart.

It is very simple to implement a minus sign effect. For example, if you want to implement a 10px*2px minus sign graphic, then CSS:

.minus {
    background-image: linear-gradient(to top, #666, #666);
    background-size: 10px 2px;
}

The principle is as follows. First use gradient to generate a background that covers the entire element. A solid color (#666) gradient image, and then use the background-size attribute to control it to the size we want, and the effect is achieved.

The effect of the plus sign is similar, except that there is an additional layer of linear-gradient accumulation.

Finally, you can achieve an effect similar to the picture below:

With the traditional ::before, ::afetr pseudo-elements background-color Compared with background or border, using gradient background generation has a very important advantage, that is, center positioning is very convenient. Just add a center directly after the background attribute, while traditional implementation usually requires absolute positioning, and then It's very verbose to put the code in the middle.

The entire code of this example is given below. The css code is as follows:

.btn {
    display: inline-block;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px; height: 24px;   
    border-radius: 2px;
    box-shadow: 0 1px rgba(100,100,100,.1);
    color: #666;
    transition: color .2s, background-color .2s;
}
.btn:active {
    box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}
.btn-plus {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}
.btn-minus {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

The key html code is as follows:

<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

The final running effect is the same as the above texture.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the hover selector

##Detailed explanation of the mask-image attribute of CSS

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