Pure CSS rounded corner Box 2: transparent rounded background image

In the above case, I only gave the most original rounded corner frame model, but it still has some shortcomings. For example, you cannot apply an image to a rounded corner. In this example, I will make some innovations based on the above. The background image is rounded. It seems that no such function application is available on the network. I have only seen how to implement it using js, you can refer to the following JS solutions in my article "semi-perfect solution for ultra-smooth rounded corner boxes. However, the implementation of the pure CSS method is exclusive to me. If there are similarities, we can only say that the heroes are slightly different. Haha!

Let's take a look at the final result to give you a general impression.

Figure 1

Such a small area layout is widely used in Webpage Design. However, the popular network practice is to use images to cut up and down images into three pieces, then, we use three DIV or SPAN containers at the same level to fill an image. However, this method has the biggest problem: it cannot automatically adapt to the width change. Generally, we use a fixed width, this is determined by the image width.

Of course, for some experienced personnel, you can use the jiugongge layout (refer to my article 《Basic Layout) Method or sliding door to achieve adaptive width changes, nine cells generally use eight images, while sliding door although only one image, but in order to adapt to the width change, this image is usually very large.

　　However, my original method can fully adapt to different width requirements and be fully compatible with all browsers. All I need is a very small horizontal background image.

Let's get down to the truth.

　　Basic Principles:

We all know that the image is positive and cannot be rounded. How can we make an external circle transparent image? In fact, the reason is that it is a very simple thing. After you see the following amplification, it may be "oh". It turns out that this is not the case ......

Figure 2

Yes, you can see this clearly, but I wasted a lot of brain cells to think of this method. Haha!

The principle of implementing this method is simple:In eachBThe same image is loaded each time in the tag and located based on the background.Background-positionTo achieve the effect.We know that the number of times a single image is loaded does not significantly affect the performance, because the image has been cached locally by the computer, just as it is done by merging images with css sprites.

However, it should be noted that the positioning of the image loaded by each B tag is different.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page