目標(biāo)效果：

這個(gè)弧線的實(shí)現(xiàn)
我們所有元素默認(rèn)的都是長方形的元素，所以如果想要實(shí)現(xiàn)這個(gè)弧線，那必然需要做出圓形。

step 1 一個(gè)長方形的框

設(shè)置 overflow: hidden;
原理就是：方形框里邊覆蓋一個(gè)圓形的框，然后給外邊的方框設(shè)置 overflow: hidden; 那么多出的圓的部分將不會(huì)顯示

step 2 做一個(gè)圓

1. width:930rpx;
2. height:930rpx;
3. border-radius: 465rpx;

讓半徑radius等于寬高的一半就可以將一個(gè)方框設(shè)為圓形
原理很簡單，“正方形的內(nèi)切圓的半徑等于正方形邊長的一半”。

step 3 調(diào)整圓相對(duì)于外邊的方框的位置就行

1. margin-left:-224rpx;
2. margin-top:-303px;

一個(gè)點(diǎn) 我發(fā)現(xiàn)可以使用left 和 top 但是無法使用bottom 和right。
也是，畢竟默認(rèn)的都是從左上開始排列的。

完整代碼

1. //.wxml
4.  
5. //.wxss
6. .distance{
7. width:498rpx;
8. height:626rpx;
9. background-color: #fff;
10. border-radius: 12rpx;
11. position:absolute;
12. z-index:99999;
13. top:200rpx;
14. left:126rpx;
15. overflow: hidden;
16. }
17. .dist_s{
18. width:930rpx;
19. height:930rpx;
20. border-radius: 465rpx;
21. background-color: rgb(233, 233, 233);
22. margin-left:-224rpx;
23. margin-top:-303px;
24. }

事實(shí)證明：為了適配各種設(shè)備，雖然寬度都設(shè)置好了，但是高度需要適配，一般情況下不能使用一個(gè)固定的值，而是應(yīng)該使用比例。

實(shí)驗(yàn)證明，任何形式的居中都不如想方設(shè)法讓他可以使用flex布局來達(dá)到居中的目的。

至此，完成。

改變圓的位置的效果
 

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。