How to realize the arc effect of WeChat Mini Programs

This article mainly explains "how to achieve the arc effect of WeChat Mini Programs". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought slowly and deeply. Let's study and learn "how to achieve the arc effect of WeChat Mini Programs"!

Target effect:

All of our elements are rectangular by default, so if you want to achieve this arc, you have to make a circle.

Step 1 A rectangular box setting overflow: hidden

The principle is: the square box is covered with a circular box, and then the outer box is set to overflow: hidden;, so the part of the circle will not be displayed

Step 2 make a circle width:930rpx;height:930rpx;border-radius: 465rpx; if the radius radius is equal to half of the width and height, you can set a square to a circle

The principle is simple: "the radius of the inner tangent circle of a square is equal to half the length of the side of the square."

Step 3 just adjust the position of the circle relative to the outer box margin-left:-224rpx;margin-top:-303px; a point I found that you can use left and top but not bottom and right.

Also, after all, the default is arranged from the top left.

Complete code

/ / .wxml / / .wxss.distance {width:498rpx;height:626rpx;background-color: # fff;border-radius: 12rpxpositiondisplacement.indexPartion 99999TrachetPlus 200rpxpositionplace126rpxtransposition: hidden;}. Dist_s {width:930rpx;height:930rpx;border-radius: 465rpxholism backgroundcolor: rgb (233,233,233); margin-left:-224rpx;margin-top:-303px } facts have proved that: in order to adapt to various devices, although the width has been set, but the height needs to be adapted, in general, a fixed value cannot be used, but proportion should be used.

Experiments show that any form of centring is not as good as trying to make it possible for him to use the flex layout to achieve the goal of centring.

So far, complete.

The effect of changing the position of a circle

Thank you for your reading. The above is the content of "how to achieve the arc effect of WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to realize the arc effect of WeChat Mini Programs. The specific use of the situation also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!