Shulou(Shulou.com)06/03 Report--

How to make CSS fillet frame, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Border-radius of CSS3

Use DIV+CSS to generate fillet frame, in many cases will be used, the current DIV+CSS fillet frame, one is to use CSS3, the other is to use the layout to simulate the fillet.

First of all, using CSS3, the premise is that your browser must support CSS3,Firefox3. Many of the rounded corners I see are directly generated by CSS3. It is just that right angles are still displayed under ie, so let ie stubbornly go.

With CSS3, you can specify that all four corners are rounded corners, or it is very convenient for a certain corner to be rounded. The code is as follows:

CSS Code copies content to the clipboard

# round {background-color: # 000; border: 1px solid # 000;-moz-border-radius: 10px;-webkit-border-radius: 10px; color:#fff;} # indie {background-color: # 000; border: 1px solid # 000;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 10px -webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 10px; color:#fff;} fillet border part fillet

Do not use border-radius to fillet

In CSS3, the rounded rectangle can be easily set by using the property border-radius, but this property is not supported in IE8 and below. In order to realize the width and height adaptive rounded rectangle in the old version of the browser, the following three methods can be used.

1. Use background pictures to make fillets

Use the background picture to make a wide, high adaptive rounded rectangle, first of all, you need to cut out four rounded corners, and then put the four rounded corners on the four corners of the rectangle. This requires a total of five div tags, a container div and four rounded background div. Isn't it easy to understand.

In terms of implementation, we need to pay attention to some details. For rectangular containers div:

The size of the upper and lower inner margins is set to at least the height of the fillet.

Position is set to relative positioning.

Place content.

For 4 fillet backgrounds div:

Set each fillet background picture separately.

Absolutely positioned at the four corners of the container rectangle.

You need to set the width and height value to display the background picture.

Suppose the width and height of the fillet image is 5px. The specific code is as follows:

XML/HTML Code copies content to the clipboard

CSS Code copies content to the clipboard

.content {position: relative; padding: 5px;} .top-left, .top-rightright, .btm-left, .btm-rightright {position: absolute; width: 5px; height: 5px;} .top-left {top: 0; left: 0; background: url (imgs/top-left.png) no-repeat top left;}. Top-rightright {top: 0; rightright: 0 Background: url (imgs/top-rightright.png) no-repeat top left;}. Btm-left {bottombottom: 0; left: 0; background: url (imgs/btm-left.png) no-repeat top left;}. Btm-rightright {bottombottom: 0; rightright: 0; background: url (imgs/btm-rightright.png) no-repeat top left;}

two。 Making rounded rectangle with pure CSS+div

The principle of this method is to use pixels to draw arcs to simulate fillets. For simplicity, I'll use an example with a fillet radius of 3px, where the background color of the rounded rectangle is pink and the border of the rectangle is black. The upper-left corner fillet is enlarged as shown in the following image:

Here, the upper and lower rectangles need three div with a height of 1px and a vertical column to simulate the fillet. The specific implementation is as follows:

The first div is the black top border of the rectangle in the image above. Because the fillet radius of the simulation is 3px, the left and right margin of the div is set to 3px, and the background color is set to black.

The left and right margin of the second div is set to 2px, the left and right border is the black line of 1px, and the background color is pink.

The left and right margin of the third div is set to 1px, the left and right border is the black line of 1px, and the background color is pink.

The two fillets below the rounded rectangle are the above three div in reverse order.

The div of the rectangular content area only needs to set the left and right border and background color.

The specific code is as follows

XML/HTML Code copies content to the clipboard

Aaaaa

CSS Code copies content to the clipboard

R1 {height: 1px; margin: 03px; background-color: # 111;} .R2 {height: 1px; margin: 02px; background-color: # f4b4b4; border-left: 1px solid # 111; border-right: 1px solid # 111;} .r3 {height: 1px; margin: 01px; background-color: # f4b4b4; border-left: 1px solid # 111; border-right: 1px solid # 111 } .content {background-color: # f4b4b4; border-left: 1px solid # 111; border-right: 1px solid # 111;}

Analysis of advantages and disadvantages of this method:

No background images are used, which reduces the number of HTTP requests.

Good maintainability in the later stage, but with the increase of rounded rectangle pixels, the meaningless div code will multiply.

The rounded rectangle implemented has limitations.

Can only achieve solid color fillet.

3. Use CSS border to draw trapezoid simulation fillet

By setting the border property, you can get trapezoids and triangles, as shown in the following figure:

When you set a relatively large width value for the four borders of the div, you can get four trapezoids, such as the first pattern in the figure above.

On this basis, when the height of div is set to 0, the trapezoid and isosceles triangles can be obtained, such as the second pattern in the figure above.

When the width and height of div are set to 0, and only the top and left borders are set, you can get two right triangles, as is the case with the third pattern in the figure.

On this basis, set the color of one of the borders to transparent, and you can get a right triangle like the fourth pattern.

The code is as follows:

XML/HTML Code copies content to the clipboard

CSS Code copies the content to the clipboard. Box1 {height: 20px; width: 20px; border-top: 20px solid red; border-right: 20px solid green; border-bottom: 20px solid blue; border-left: 20px solid yellow;} .box2 {height: 0; width: 20px; border-top: 20px solid red; border-right: 20px solid green; border-bottom: 20px solid blue; border-left: 20px solid yellow } .box3 {height: 0; width: 0; border-top: 50px solid red; / * border-right: 20px solid green; * / * border-bottom: 20px solid blue; * / border-left: 50px solid yellow;} .box4 {height: 0; width: 0; border-top: 50px solid red; / * border-right: 20px solid green; * / / * border-bottom: 20px solid blue * / border-left: 50px solid transparent;}

Now that you know how to draw a trapezoid through border, how can you use the trapezoid to simulate a rounded rectangle? It is very simple, as long as you put a trapezoid above and below the rectangle, you can get the rounded rectangle. The principle is to use the left and right beveled edges of the trapezoid to simulate the fillet, directly on the effect picture:

The specific code is as follows:

XML/HTML Code copies content to the clipboard

Use border to draw trapezoid and simulate fillet

CSS Code copies content to the clipboard div {box-sizing: border-box;} .top {height: 0; border-top: 3px solid transparent; border-bottom: 3px solid # 111; border-left: 3px solid transparent; border-right: 3px solid transparent;} .bottombottom {height: 0; border-top: 3px solid # 111; border-bottom: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid transparent } .content {color: # fff; background-color: # 111;} .wrapper {width: 200px; margin: 0 auto;} this is the answer to the question on how to make the CSS fillet frame. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.