In a previous blog post, "Some basic points of the mobile H5 summary of the fifth section of the border processing," I mentioned, you can use box-shadow:0 0 0 1px #ddd; this way to simulate the border. Of course, the content of blog post is not wrong, but there are certain limitations. So here today, correct and refine the flaws in my previous blog post .
Previous article reviewWhy would you want to simulate a border instead of writing a border directly?
The box model is calculated because of the bounding rectangle. And we might be using the adaptive layout on the mobile side. This is a laborious way to calculate borders.
Therefore, using the method of simulating the border, you can not consider the width of the border problem, so it is more convenient.
Of course, usingbox-sizing:border-boxsuch a property also allows the bounding rectangle to not be counted in the box model.
And this approach is used in many modern CSS frameworks.
But I personally do not recommend this approach. Because, this padding is not counted in the box model.
I don't like it anyway. So I'll just simulate the border!
If you don't want to open the link above, look at what blog post said. Here I summarize two key simulation methods. If you don't understand, you can go to see, if you understand, just look at the following content.
Method One outline simulates a border
Use outline: 1px solid #ddd; such strokes to simulate a border
Advantages:
1. You can border use the same kind of linear
2. Can adjust the border to the box distance outline-offset parameter
Disadvantages:
1. Can not be made to fit fillet elements (this is considered a bug, may be repaired in the near future)
2. It can only be added to four sides at a sudden, not only one side.
Method two box-shadow simulate a border
box-shadow:0 0 0 1px #ddd;simulate borders with outer glow
Advantages:
1. Can fit rounded elements to create a perfect border
2. Can repeat parameters, create multiple borders
Disadvantages:
1. Only the solid line is linear and cannot be dashed
Read more in front of my blog, or Baidu related information.
box-shadowI thought I couldn't do it. I can see my CSS is not strong enough, but also to study hard.
Last time I was idle, I wrote a set of alphanumeric tables with a DIV to see the demo. Although the relevant knowledge points have been used, there is still no way to simulate the border.
Think about it today, it turns out that box-shadow you can simulate any side of the four edges. That's why I wrote this blog post.
There are too many languages to look directly at the code:
HTML code<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="box Sibian"></div> <div class="box Shangbian"></div> <div class="box Xibian"></div> <div class="box Zuobian"></div> <div class="box Youbian"></div> <div class="box Zuoshangbian"></div> <div class="box Youshangbian"></div> <div class="box Zuoxiabian"></div> <div class="box Youxiabian"></div> <div class="box Wushangbian"></div> <div class="box Wuyoubian"></div> <div class="box Wuxiabian"></div> <div class="box Wuzuobian"></div></body></html>. Box {width: + px; height: + px; background: #f00; margin:- px; 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 5 px #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 5 px #000; }View Box-shadow Demo Border Demo
Summarizebox-shadowthe properties used can be infinitely repetitive and can be filled to meet our needs.box-shadow you can set only two values so that there is no extension, no blur, and 1:1 movement.box-shadowStill exist, that is, you can only simulate solid lines, cannot simulate dashed linesThis article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article starting link. Otherwise, legal liability will be investigated.
Starting Address: http://blog.csdn.net/FungLeo/article/details/51396410
Mobile End H5 CSS3 Simulation Border latest research (super Practical) by Fungleo
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
