In a previous blog post "Mobile In "Summary of some basic knowledge points of terminal H5 in Section 5: Border Processing", I mentioned that you can use box-shadow:0 0 0 1px #ddd;
to simulate borders. Of course, The content in the blog post is not wrong, but it has certain limitations. Therefore, today I am here to correct and improve the flaws in my previous blog post.
Why should I simulate the border instead of directly Write border?
Because the border needs to calculate the box model. And we may use adaptive layout on the mobile terminal. It is very laborious to calculate the border.
Therefore, by using the method of simulating borders, you do not need to consider the width of the border, which is more convenient.
Of course, using attributes likebox-sizing:border-box
can also exclude the border from being calculated in the box model.
And this method is used in many modern CSS frameworks.
But I personally do not recommend this approach. Because this way padding is not included in the box model.
Anyway, I don’t like this approach. So I simulated the border!
If you don’t want to open the link above, read what is said in the previous blog post What. Here I will summarize the two key simulation methods. If you don’t understand, you can read it. If you understand, just read the following content.
Method 1outline
Simulate the border
Use outline: 1px solid #ddd;
This stroke method simulates the border
Advantages:
1. You can use various line shapes like border
2. You can adjust the distance from the border to the boxoutline-offset
Parameters
Disadvantages:
1. It cannot be made to fit rounded elements (this is considered a BUG by W3C and may be fixed in the near future)
2. It can only be added to the four sides at once, not just Add a side.
Method 2box-shadow
Simulate border
Usebox-shadow:0 0 0 1px #ddd;
Outer glow simulation border
Advantages:
1. Can fit rounded corner elements to generate perfect borders
2. Can repeat parameters to generate multiple borders
Disadvantages:
1. Only solid lines are linear, not dashed lines
For more information, please see my previous blog post, or Baidu related information.
box-shadow
Can simulate a border on any sideI originally thought it was impossible. It can be seen that my CSS skills are not strong enough, and I have to study hard.
Last time I had nothing to do, I wrote a set of alphanumeric tables using a p to view the DEMO. Although I used relevant knowledge points, I still did not rely on the idea of simulating borders.
Thinking about it carefully today, it turns out that box-shadow
can simulate any of the four sides. Therefore, I wrote this blog post.
There are too many languages, it is better to be direct Look at the code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p class="box sibian"></p> <p class="box shangbian"></p> <p class="box xibian"></p> <p class="box zuobian"></p> <p class="box youbian"></p> <p class="box zuoshangbian"></p> <p class="box youshangbian"></p> <p class="box zuoxiabian"></p> <p class="box youxiabian"></p> <p class="box wushangbian"></p> <p class="box wuyoubian"></p> <p class="box wuxiabian"></p> <p class="box wuzuobian"></p></body></html>
.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 #000;} .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 simulated border DEMO
Using the box-shadow
attribute, it can be repeated indefinitely and can be continuously filled to meet our needs.
Also, box-shadow
You can set only two values, so there is no expansion, no blur, and one-to-one movement.
box The disadvantage of -shadow
still exists, that is, it can only simulate solid lines, but not dotted lines.
In the use of rounded corners, better calculations are needed. Anyway, multiple coverage is used Features
It is the easiest to create a 1px border.
The above is the detailed content of H5 mobile terminal super practical css3 simulated border latest research sample code. For more information, please follow other related articles on the PHP Chinese website!