H5 mobile terminal super practical css3 simulated border latest research sample code

黄舟

Release： 2017-03-10 16:54:22

Original

1944 people have browsed it

The latest research example code of ultra-practical css3 simulation border for H5 mobile terminal

Preface

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 like box-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!

Previous article review

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 side

I 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:

html 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>

Copy after login

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 #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;}

Copy after login

View box-shadow simulated border DEMO

Summary

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!