Home  >  Article  >  Web Front-end  >  Use css3's radial-gradient to achieve a penetrating circle

Use css3's radial-gradient to achieve a penetrating circle

高洛峰
高洛峰Original
2016-10-15 16:47:392466browse

Look at the requirements first:

Use css3s radial-gradient to achieve a penetrating circle

As shown in the picture, you need to create this effect. How to usually do it? The semicircle cut into the picture can solve a situation where the background of the picture is fixed and not tiled.

If the background image is a tiled pattern, isn’t it fixed? The cut semicircle cannot correspond to the background image

Now you can use the radial gradient of css3 to realize this transparent circle. In this way, if the circle is transparent, you don’t have to worry about the background image

background-image: repeating-radial-gradient(500px 500px at 50% 0px ,transparent 0%, transparent 50px,#0cc 50px, #0cc 200%);

Code Explanation:

500px 500px at 50% 0px ,

The width and height of the background color of the white area, and the coordinates of the center of the circle

transparent 0%, transparent 50px,#fff 50px, #fff 200%

from the center of the circle to the small circle The background color is transparent, and the background color from the small circle to the big circle is #0cc


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