Why is it even harder? Because it needs to fit the four images-use one for each rounded corner. Each rounded corner must be separated so that the box can be stretched in all directions. Therefore, four images require four HTML objects as the carrier of the background image.
Some implementation methods include using "generated content" in the style sheet, that is, using the: before and: After pseudo classes to add multiple background images to a single object. The problem with this method is that when writing this book, Internet e (IE) does not support "generating content", because a large number of users will not be able to see the rounded corner effect.
What should we do? If a fixed width has been pre-determined, it is easy to use the method described in the previous section of this chapter, only the background image: one is used to display the left and right corner of the top, the other shows the left and right corner of the bottom. Preparing two HTML objects as image carriers is not a problem. However, when it is required to implement a box with an unfixed width, in order for IE users to see the same design effect, it is to add additional HTML code.
Rounded corners
The following is the http://browsehappy.com of Ethan Marcotte, a web-standard expert and technical editor of the book, in addressing this problem with browse happy website (Figure 5-15)
Figure 5-15 browse happy is a website designed to help people learn how to use browsers that can replace Internet Explorer with standard web compatibility.
Ethan uses a rounded corner box to display a web-compatible browser that "has been switched to use", including the software name and Icon (Figure 5-16 ).
Figure 5-16 the rounded rectangle can be expanded in any direction
Ethan does not set a fixed width for the box, but uses a work und for the aforementioned "Sliding Door" technology, so that when the content is increased (or increased, the box can be scaled both horizontally and vertically (Figure 5-17 ).
Figure 5-17 the box expands horizontally and vertically as the text grows, while keeping the rounded corner shape unchanged.
We are now building another example based on the technology used by Ethan. It will be a box with real flexibility that can accommodate everything inside it.
1. HTML code structure
As I mentioned earlier, to implement a box with flexibility in every direction, we need to add additional code. These additional code is required to independently reference the four-corner image of the box, so that it can be expanded in four directions as needed.
Note: In some cases, the HTML code has been modified to make the example simple. Originally, this rounded rectangle is part of a "definition list" object, which also contains the name of the "Switch person" and other information. This is a clever and clever way to use the definition list-you can view the http://browsehappy.com page source code to learn more details.
Remember that we should use the least HTML object as the carrier of the background image. The following is the HTML code we created:
<Div class = "Container">A <div> and a paragraph object following the container will serve as the first two carriers. We have four links: "indestructible! "Surrounded by the second paragraph object and (a controversial Additional HTML object is introduced here) A <em> object. Here I use <em> because, technically, I also intend to make it a chain table to emphasize the meaning.
At the same time, I added this object quietly. This is what I want to avoid, but in this case, we need this fourth object to introduce the necessary background image for creating the rounded corner (Figure 5-18 ).
Figure 5-18 the HTML code of the box we created provides four objects that can be used as the background image carrier.
Structure:
2. Image Policy
Although we need to reference the background image four times (one corner at a time), we can refer to the clever solution used by the Browse happy website. It only needs two GIF images. Let's take a look at the image itself to understand this method.
As shown in Figure 5-19, rounded-left.gif is a 9-pixel GIF image with a rounded corner between the top left and the bottom left. We created it much higher than expected to accommodate a large internal capacity.
Figure 5-19 The rounded-left.gif image contains the left and bottom rounded corners.
5-20, rounded-right.gif is a similar image: it displays the upper and lower image angles on the right, and the upper, right, and lower lines. The height of this image is the same as that of rounded-left.gif, and it is much wider than the original size.
Figure 5-20 The rounded-right.gif includes the right and right bottom rounded corners. This image also contains the upper and lower borders with frames.
Now let's locate this image-and it is subtle. Rounded-left.gif is aligned to top to form the angle at the top left (Figure 5-21). Then, it is used again and aligned to bottom to form the angle at the bottom left.
Figure 5-21 when attached to the top edge, the rounded corner of the image cannot be displayed unless the box is large enough to be exposed.
As long as the box does not exceed the image height, the hidden rounded corner will not be displayed (This also explains why we made the image high enough at the beginning ). Match. rounded-right.gif is also used twice -- as the right and right bottom corner.
Use the best judgment to determine how high and wide these images are, of course, mainly depends on what type of content will be placed inside the box. Leave aside some additional space to cope with unexpected text size and internal capacity.
Now, we continue to apply the style to the HTML code and integrate all the designs.
3. Application Style
Because you don't want to assign a fixed width to the box, and want the rounded corners to always be close to the content in the box, the container is floating. Floating the container prevents the box from automatically becoming as wide as the form (or other peripheral container objects. Instead, the width of the content in the box determines how wide the box is.
. Container {In addition to floating the left of the box, we also set the basic color of the text in the box: dark gray.
Next, place the two background images to the four available objects in the HTML code according to our policy. First, set the upper right corner to the background of the exterior window, attach rounded-right.gif to the upper right corner, and use the upper half of the image.
. Container {Note that you can set the background by positioning the image to the upper-right corner of the object.
The above section of rounded-right.gif shows the background of the entire container.
Figure 5-22 align the image to the top right corner and the rounded corner is displayed.
In the code order, the object after the container is the first paragraph. We use a class = "DESC" (DESC indicates description) to mark it. Then we align rounded-left.gif to top and left, and its upper half is used as the upper left corner. Here, we also set the default margin and padding values of the <p> object to 0. Later, we will add the fully appropriate padding value as needed.
. Container {The result of adding the second background image is shown in Figure 5-23. The upper left corner is added.
Figure 5-23 align the image to the upper left corner, and the partial rounded corner is displayed.
Next, add the lower left corner and specify the following section of rounded-left.gif as the background. In the above section of the image, we used to align the image to top and left for display. Now we want to align it to bottom and left to display the rounded corner below. The interval used. Add a 9px padding to the three sides of the second section to add an appropriate interval between the content and the boundary of the box. The padding of 9px is added to the left side of the second section. The value is the same as the width of the image to make "indestructible! "The rounded corner behind the link text can be displayed.
. Container {The results so far are shown in Figure 5-24. Three of the four rounded corners have been added to the correct position, and the last one is left.
Figure 5-24 The rounded-left.gif is retained but is aligned to the bottom. A third rounded corner is added.
The last background image is attached to the <em> Object nested in the second paragraph object. We align rounded-right.gif with bottom and right to display the following parts of the image. In addition, we need to include some padding values so that the text in the box can be evenly separated from the edge. Most browsers display the text enclosed by <em> in italic, so we need to overwrite this property to display the normal font.
. Container {Generally, <em> is an inline object and is not automatically extended until it is the same as the width of the parent container. Therefore, it cannot be used as a carrier for background images. However, you can add the display: block; rule to turn <em> into a block-level object and force any content inside it to extend to the boundary of the box to solve this problem. In addition, we set the link text in the box to orange, which is much larger than normal-because it should be the same for non-destructive links.
Figure 5-25 shows the final frame effect. by aligning the two background images, four rounded corners are created.
Figure 5-25 this is our finished product, the "Unbreakable" rectangular frame
4. Unbreakable features
As in the Browse happy example, pay attention to the rectangular box with rounded corners, which can be freely expanded and reduced in all directions based on the change in the text size and size. Truly unbreakable (Figure 5-26)
Figure 5-26 the box can be expanded no matter how large the text or content is.
Source: impeccable Web Design
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
