Mobile End H5 CSS3 Simulation Border latest research (super Practical) by Fungleo

Mobile End H5 CSS3 Simulation Border latest research (super Practical) by Fungleo Preface

In a previous blog post "Mobile end H5 some basic knowledge points to summarize the fifth section border processing", I mentioned that you can use the box-shadow:0 0 0 1px #ddd; In this way, to simulate the borders. Of course, the content of posting is not wrong, but there are certain limitations. So here today, correcting and perfecting the flaws in my previous blog post.

Why do you want to simulate borders instead of writing borders directly?
Because the border is to compute the box model. And we may be using adaptive layouts on the mobile side. This is a hard way to compute a border.
Therefore, it is more convenient to use the method of simulating borders without considering the width of the border.
Of course, using a property such as Box-sizing:border-box also allows you to not compute the border in the box model.
And this approach is used in many modern CSS frameworks.
But I personally do not recommend this approach, because, so padding is not counted in the box model.
Anyway, I don't like this. So I'm going to simulate the border! previous article Review

If you don't want to open the link above, look at what posting said. Here I summarize two key simulation methods. If you do not understand, you can see, if you understand, directly to the following content.

method outline a simulated border

The use of outline:1px solid #ddd; To simulate a border in such a way as a stroke

Advantages:
1. Can use a variety of linear, like border
2. Can adjust the border to the box distance Outline-offset parameter

Disadvantages:
1. Cannot be made into a fillet element (this is considered a bug by the consortium and may be repaired in the near future)
2. Can only be added to four edges, not just add one side.

method Two Box-shadow the emulated border

Using box-shadow:0 0 0 1px #ddd; Outer Glow Simulation Border

Advantages:
1. You can fit the rounded elements to create a perfect border
2. You can repeat the parameters, generate more than one border

Disadvantages:
1. Only solid line linear, can not do dotted line

More please see my previous blog, or Baidu related information. Box-shadow can simulate the borders of any edge

I thought I couldn't do it. It is obvious that my CSS is not strong enough, but also to study hard.

Last time I had nothing to do, I used a div to write a set of alphanumeric tables to view the demo. Although the relevant knowledge points are used, there is no way to simulate the border.

Today, a careful thought, the original Box-shadow can be simulated four edge of any one side. So, just write this blog post.

Too much language to look directly at code: HTML code

<! DOCTYPE html>
 
CSS Code 
.box {width:100px;height:100px;background: #f00; margin:50px;float:left;} sibian {
box-shadow:0 0 0 5px #000;} . Shangbian {box-shadow:0 -5px #000; xibian {box-shadow:0 5px #000;}. Zuobian {box-shadow: -5px 0 #000;}. Youbian {box-
shadow:5px 0 #000;} . Zuoshangbian {box-shadow: -5px-5px #000, -5px 0 #000, 0-5px #000; Youshangbian {box-shadow:5px-5px #000, 5px 0 #000, 0
-5px #000;} . Zuoxiabian {box-shadow: -5px 5px #000, -5px 0 #000, 0 5px #000; youxiabian {box-shadow:5px 5px #000, 5px 0 #000, 0 5px #00
0;}  . Wushangbian {box-shadow:5px 5px #000, 5px 0 #000, 0 5px #000, -5px 5px #000, -5px 0 #000; Wuyoubian {box-shadow: -5px-5px
#000, -5px 0 #000, 0-5px #000, -5px 5px #000, 0 5px #000;}  . Wuxiabian {box-shadow: -5px-5px #000, -5px 0 #000, 0-5px #000, 5px-5px #000, 5px 0 #000; Wuzuobian {box-shadow:5px-5px #000, 5px 0 #000, 0-5px #000, 5px 5px #000, 0 5px #000;} 
 
View Box-shadow Simulation border Demo summing up the use of Box-shadow properties can be infinitely repetitive features, can be continuously filled to meet our needs. Also, Box-shadow can set only two values, so there is no expansion, no virtualization, and a 1:1 move. The shortcomings of Box-shadow still exist, is only to simulate the real line, can not simulate the use of dotted lines in the round corner, the need for better calculation, anyway, the use of multiple coverage of the characteristics of the 1px border, is the simplest.

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article first link. Otherwise, the law will be held accountable.
Starting Address: http://blog.csdn.net/FungLeo/article/details/51396410