Tips for CSS fillet rectangles

The so-called CSS advanced techniques ... In fact, some of the basic skills of the creative mix, any means and skills are the way to solve the problem. As long as you learn this way of thinking, you can also have your own CSS cheats.

CSS2 There is no way to create a curved border, obviously, only the box is not able to meet our designers. So the CSS fillet technology is still so hot now.

1. Fixed-width solid-color Rounded Rectangle

In many rounded corners, fixed-width rounded rectangles should be the easiest to implement, requiring only 2 pictures and a simple HTML code.

The HTML code is as follows: webjx.com

Title

Content

The picture is roughly as follows:

Top.gif Bottom.gif

The CSS code is roughly as follows:

. Wrapper{width:181px;background: #8cc355 url (.. /images/bottom.gif) no-repeat left bottom;}

. Wrapper h1{padding:10px 20px 0 20px;background:url (. /images/top.gif) no-repeat left top;}

. Wrapper p{padding:0 20px 10px 20px;}

Tips:

The width in the wrapper is the true width of the picture, and the background color in the background is the same color as a solid color picture.

H1 and P are set up in the corresponding patches, for the content does not overlap or touch the outer frame.

The picture needs to have a background color, which is the same background color as the parent container that contains the current container (div class= "wrapper") in addition to the color of the rounded rectangle's solid color section.

This method is suitable for a solid-color rounded rectangle with a fixed width and a highly adaptive angle.

2. Fixed-width non-solid rounded corners Rectangle

This method is an extension of the previous method, this time we do not define the background color on the container, but define the duplicate background picture.

The HTML code is as follows:

Title

Content

The picture is roughly as follows: Web Teaching Network

Top.gif Bottom.gif Tile.gif

The CSS code is roughly as follows:

. Wrapper{width:183px;background:url (. /images/tile.gif) Repeat-y Center;

. Wrapper h1{padding:20px 20px 0 20px;background:url (. /images/top.gif) no-repeat left top;}

. Wrapper p{padding:0 20px 20px 20px;background:url (... /images/bottom.gif) no-repeat left bottom;}

Tips:

The characteristic is similar to the first method;

cannot be applied to background images that are not vertically altered.

PS. Fixed-height rounded rectangles can also be similar to complete, without repeating the

3. Sliding door Technology (sliding Doors)

The first two rounded rectangles are fixed-width and can only be adapted vertically to grow (or horizontally), and if you need to adapt the size of your growth vertically and horizontally, it is clear that neither of these methods works. Then we can use the so-called sliding door technology.

Principle:

Top-left.gif and Bottom-left.gif are both large images, top-right.gif and bottom-right.gif are small images, and small images are automatically slid to fit the content according to their size on large images.

The method uses 2 groups of 4 pictures: The top of the 1 group is made up of rounded corners, and 1 groups of bottom pictures form the bottom fillet and the main body. Note the maximum height and width of the container cannot exceed the maximum height and width of the picture.

Structure position of the Picture: Web page Teaching Network

The HTML code is roughly as follows:

Title

Content

The CSS code is roughly as follows:

. Wrapper{width:20em;background: #ccc url (.. /images/bottom-left.gif) no-repeat left bottom;}

. Box-outer{background:url (. /images/bottom-right.gif) No-repeat right Bottom;}

. Box-inner{background:url (. /images/top-left.gif) no-repeat left top;}

. Wrapper H1{padding:2%;background:url (... /images/top-right.gif) No-repeat right top;}

. wrapper p{padding:2%;}

Tips:

This method solves the problem of container expansion well, but it should be noted that the maximum size of the container should not exceed the maximum size of the background picture.

This method requires 2 sets of additional tags without any semantics and is not structurally ideal, we can use JavaScript and DOM to dynamically add additional elements to avoid this problem, JavaScript is not discussed.

Sliding doors are so widely used that they can be seen everywhere.

4. Peak angle (Mountaintop)

The invention of the Web master Dan Cederholm is similar to his small chameleon icon in the Web Standard solutions.

If you use the technique of 3 sliding doors to create rounded rectangles of multiple colors, is that a different set of colors? Is that going to be a lot of trouble? Luckily, Dan brought us the top corner. Instead of a variety of colors, he builds a rounded-corner mask. Using a mask to cover the background color and generate rounded rectangles, this reverse thinking is admirable.

Fillet mask

The basic HTML code and CSS code are the same as the previous example and require 4 different rounded masks. The code does not repeat.

Tips:

You can use. png to create sleek transparent masks, but IE6 and the following versions do not support png-24 transparency and require hacks, so it is not recommended. So for the mask of a GIF picture, a rounded rectangle with small radians works better, and a large radian fillet rectangle may appear jagged. The same need to add extra non semantic tags, semantic enthusiasts can use JavaScript to do this work.

5. CSS Sprites Rounded corners

CSS Sprites is not a specially crafted rounded rectangle, but it provides a scheme for making rounded rectangles.

Structure composition diagram

A small figure of the rounded corners actually used

Only use the background position to specify the background positioning of the fillet picture, but there will be a lot of extra tags, not recommended here.