What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

青灯夜游

Sep 20, 2018 am 11:32 AM

border-radiuscsslinear-gradient

In the process of front-end development, linear-gradient is sometimes used to achieve various effects. This chapter will introduce to you What does the linear-gradient() function in css do? Implement a linear gradient circular border (code) . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is css linear-gradient()?

1. Define the

css linear-gradient function, which is used to create a linear gradient "image".

2. Usage

In order to create a linear gradient, you need to set a starting point and a direction (specified as an angle) of the gradient effect. You also need to define the end color. The stop color is the smooth transition you want Gecko to make, and you must specify at least two, although you can specify more colors to create more complex gradient effects.

Example (specify 3 termination colors):

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 */

Rendering:

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

The example does not specify a direction to achieve linear gradient , so the default is to achieve the effect from top to bottom, you can also specify a direction (angle) to achieve the effect, for example:

Specify a direction (from left to right):

background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

Specify a direction (45-degree angle):

background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

At the same time, you can also achieve a gradient transparency effect (define a transparency):

background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

2. CSS setting of linear gradient circular border (code)

Principle:

First make two squares , different sizes, superimposed together

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

Use the border rounded corner attribute: border-radius to set the rounded angle of the border to 100%

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

After using linear-gradient() to add the gradient color of the outer circle, it is made:

What does the linear-gradient() function in css do? Implement circular border with linear gradient (code)

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框渐变的圆形</title>
        <style>

            .border1{
                width: 200px;
                height: 200px;
                margin:100px auto;

                position: relative;
                border: 1px solid transparent;
                border-radius: 100%;
                background: white;
                background-clip: padding-box;
                padding: 10px;
            }
            .border1::after{
                position: absolute;
                top: -40px; 
                bottom: -40px;
                left: -40px;
                right: -40px;
                background: linear-gradient(45deg,red, blue);
                content: &#39;&#39;;
                z-index: -1;
                border-radius: 100%;
            }
        </style>
    </head>
    <body>    
        <div class="border1"></div>
    </body>
</html>

Example It's very simple. You can practice it or make modifications on this basis, such as: semicircle...

The above is the detailed content of What does the linear-gradient() function in css do? Implement circular border with linear gradient (code). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Simulating Mouse MovementApr 22, 2025 am 11:45 AM

If you've ever had to display an interactive animation during a live talk or a class, then you may know that it's not always easy to interact with your slides

Powering Search With Astro Actions and Fuse.jsApr 22, 2025 am 11:41 AM

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” th

Undefined: The Third Boolean ValueApr 22, 2025 am 11:38 AM

I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a

In Defense of the Ternary StatementApr 22, 2025 am 11:25 AM

Some months ago I was on Hacker News (as one does) and I ran across a (now deleted) article about not using if statements. If you’re new to this idea (like I

Using the Web Speech API for Multilingual TranslationsApr 22, 2025 am 11:23 AM

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making

Jetpack Gutenberg BlocksApr 22, 2025 am 11:20 AM

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us

Creating a Reusable Pagination Component in VueApr 22, 2025 am 11:17 AM

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there

Using 'box shadows' and clip-path togetherApr 22, 2025 am 11:13 AM

Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this

See all articles