Implement compatibility of the CSS bold dotted border (dashed) Effect

Source: Internet
Author: User
Tags response code
ArticleDirectory
    • I. Incompatibility issues with dashed coarse virtual boxes
    • Ii. Use css3 to implement the border dotted box Effect of compatibility
    • Iii. Demo code and final result display
    • 4. A little improvement
    • V. Conclusion

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 822

I. Incompatibility issues with dashed coarse virtual boxes

A common attribute in the CSS border-style attribute is dashed, which is used to form a virtual box. Generally, the width we use is mostly 1 pixel, so the differences are not detailed or noticeable. However, if the Border width (border-width) is greater than 1 pixel, the performance differences between different browsers are obvious. For a very simple example, see the following testCode:

 
. Border_dashed {
Width: 260px;
Height: 180px;
Border: 2px dashed red;
Background: yellow;
}

The results in various browsers are as follows:

We can see that in IE, the 2-pixel dotted box is repeated in the form of 4-2-4-2, And the corner is evenly connected. Firefox and chrome both use the 6-6-6-6-6 format to repeat the virtual border, in the processing of the starting point of the dotted box, Firefox seems to be tiled from the top of the real box, but Chrome does not seem to be. The last is operabrowser, although operabrowser and IE are real-line: the white space is tiled in the form of, but the width of the operabrowser is larger than that of IE, which is 6-3-6-3, the same as that of chrome. Basically, there are differences between different browsers.

You can click here: 2px dashed dotted box

In this case, what should we do to implement the virtual box Effect of compatibility? In the past, we could only find a model to split the entire border graph, but now, with the development of the browser, we have a better scalability and strong compatibility method.

Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live (http://www.zhangxinxu.com/wordpress/) This article address: http://www.zhangxinxu.com/wordpress? P = 822 visit the original source, more front-end technologies you have never seen. Ii. Use css3 to implement the border dotted box Effect of compatibility

The potential of css3 is huge, and sometimes it can become a tool for solving compatibility issues. Css3 has a very powerful attribute, that isBorder-Image.

For details about the basic attributes of css3 border-image, refer to-css3 border-iamge Reference Guide. If you want to understand the usage, principles, and examples of border-image, we recommend that you click my "css3 border-image details, applications, and jquery plug-ins" article.
This article does not explain border-image too much.

1. Analysis and Summary
First of all, we need to make the border under each browser almost the same as IE. The virtual boxes in IE are closely and practically practical, which is a good choice for cutting lines. Therefore, the following content is used to Implement IE browsers (4 pixels-2 pixels-4 pixels-2 pixels).

Currently, from firefox3.6, chrome2, safari4, to opera10, powerful border-image attributes are supported. Therefore, we can use the border-image attribute to implement a dotted box effect similar to that in IE browsers. For border-image, the border effect is achieved by using the image. In other words, in this example, In the firefox3.6, chrome2, safari4, and opera10 browsers, we will use an image to simulate the dotted border effect under IE. Next, we will start to explain how to implement it.

2. Link image of border-Image
In fact, the CSS-related code is very simple. The key is the image creation. If you want to make a background image that can simulate the effect of the virtual box, it is impossible to have a deep understanding of the border-image attribute. Therefore, if you are a learner, we recommend that you take a look at the css3 border-image details, applications, and jquery plug-ins I have written.

The image linked by border-image is very small in size, with a size of 18 pixels * 18 pixels. To help you see it clearly, I specially cut an image enlarged in Photoshop cs4, as shown below:

Among them, I have drawn a nine-square-frame model using the reference line. I just read it again, but it is not the best border chart. It seems that there are no rules. In fact, it is very simple. the four corners of the jiugong Ge are fixed and do not participate in Tiled stretching. The parts outside the four corners are the repeat part. I will not go into details here. I have explained it in detail in the above article (there is also an interactive Flash animation demonstration ).

Now let's take a look at the response code and implementation results.

Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live (http://www.zhangxinxu.com/wordpress/) This article address: http://www.zhangxinxu.com/wordpress? P = 822 visit the original source, more front-end technologies you have never seen. Iii. Demo code and final result display

I will not talk nonsense about it. Go directly to the instance code, as shown below:

 
. Border_dashed {
Width: 260px;
Height: 180px;
Border-width: 6px;
/* Ie */
Border: 2px dashed red \ 9;
/* Firefox */
-Moz-border-image: URL (http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
/* Chrome & safari */
-WebKit-border-image: URL (http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
/* Opera */
Border-image: URL (http://www.zhangxinxu.com/study/image/dashed_red.png) 6 repeat;
Background: yellow;
}

The corresponding HTML code is just a DIV, as follows:

 
<Div class = "border_dashed"> </div>

The result is shown in:

Other browsers, such as chrome and opera, have similar effects.

You can click here: border-image's compatibility dotted box Effect

Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live (http://www.zhangxinxu.com/wordpress/) This article address: http://www.zhangxinxu.com/wordpress? P = 822 visit the original source, more front-end technologies you have never seen. 4. A little improvement

As mentioned above, the link image of the original border-image can be improved. The improvement lies in the processing of the corner. in IE browser, the border corner is evenly distributed. Therefore, we canHttp://www.zhangxinxu.com/study/image/dashed_red.pngThis image is further improved. The improved result is as shown in the following figure:

The saved address of this image is:Http://www.zhangxinxu.com/study/image/dashed_red2.png

Now we use this image to process the corners to simulate the border effect under ie. The result is as follows:

You can click here: border performance after processing

Author: Zhang xinxu, from Zhang xinxu-xin space-xin Sheng live (http://www.zhangxinxu.com/wordpress/) This article address: http://www.zhangxinxu.com/wordpress? P = 822 visit the original source, more front-end technologies you have never seen. V. Conclusion

Here, the image size is 18 pixels * 18 pixels, because a tiled minimum unit is 4 pixels + 2 pixels = 6 pixels, combined with the border-image nine-cell model, the minimum width and height are 6 pixels * 3 = 18 pixels.

Since the minimum unit of tile is 6 pixels, if the width or height of the element is not a multiple of 6, there will be no perfect seamless tile. Last, set the Border width to the minimum tile unit (for example, 6 pixels here). Otherwise, the border-image will be stretched or compressed.

In this case, the time is too short to avoid errors. please correct me.

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 822

(This article is complete)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.