Beautifully rounded corner form for landscaping web pages

Web page | rounded corner

When you do Web pages to beautify the Web page, often the table around the corner to make rounded corners, so as to avoid direct use of the table right angle of the blunt, so that the overall page more beautiful. Here are two common ways to make rounded tables.

Method One: Make fillet form with picture

This is the most common and most common method, it can adapt well to various browsers and different resolutions, most Web pages use this method.

① First Use Photoshop and other drawing software to draw a rounded rectangle, and then use the "rectangular marquee tool" to select the left-handed fillet section (Figure 1), copy it.

② do not deselect, create a new image directly, Photoshop automatically sets the size of the new image based on the height and width of the selected part. When you post it, save it as a Web format.

③ Repeat step ②, using the horizontal flip tool and the vertical flip tool, to save the rounded corners in the other three directions. (Figure 2)

④ Open web-making software, take Dreamweaver for example. Inserts a table with a row of three columns, setting its Cellpad, Cellspace, and border property values to 0. In the first column insert Picture 1.gif, the third column inserts picture 3.gif, and sets the height and width of the cell to match the picture. Sets the background color of the second column to be the same color as the fillet picture. Set width to the width of the entire table minus the width of two pictures, and open the source Code viewer, delete the characters in this column "" (Dreamweaver will automatically insert this character in each cell, if not deleted will support large table). According to gourd painting scoop, do the lower part of the rounded corners.

⑤ inserts a table with three columns of the same width in the middle of the two table inserted, and the Cellpad, Cellspace, and border property values are 0 and the width is 100%. Sets the background color of the first and third columns to be the same color as the fillet picture, with a width of 1 pixels and an open source code viewer that deletes the characters "" in the two columns. Here, a rounded table is done, and you can add what you want in the second column. (Figure 3)

Method II: Using VML technology

Using VML technology makes it easier to make a fillet table, and there's a projection!

① Modify the table to recognize the

② Add the following code to the zone:

〈style>〈br>v\:* {behavior:url (#default #vml);} 〈br〉〈/style>

③ include the following code where you want to add a fillet table: br>

Here, enter the contents of the table

You can set the width, height, and projection color of the rounded table in the code above.

In this way, a rounded table with a projection is made (Figure 4).

This method of adding rounded table is convenient, but it is not good for each browser version, and in the design is a layer of the way reality, not conducive to the layout, so try to use the first method.