微信小程序 arc效果实现教程

目标效果：

对于我们所有的元素，默认情况下，此弧的实现是矩形元素，因此如果要实现此弧，则必须创建一个圆。

step 1 一个长方形的框

设置溢出:隐藏;原理是：方框上盖有圆形框，然后外框设置溢出:隐藏;那么额外的圆圈部分将不会显示

step 2 做一个圆

宽度: 930rpx;身高: 930rpx; border-radius: 465rpx;

半径等于宽度和高度的一半，将框设置为圆是很简单的。正方形内切圆的半径等于正方形长度的一半。

step 3 调整圆相对于外边的方框的位置就行

margin-left: -224rpx; margin-top: -303px;

有一点我发现你可以使用左边和上边但你不能使用底部和右边。毕竟，默认是从左上角开始。

完整代码

//.wxml//.wxss.distance{width: 498rpx; height: 626rpx; background-color: #fff; border-radius: 12rpx; position: absolute; z-index: 99999; top: 200rpx; left: 126rpx;溢出:隐藏;}。dist_s {width: 930rpx; height: 930rpx; border-radius: 465rpx; background-color: rgb（233,233,233）; margin-left: -224rpx; margin-top: -303px;}

事实证明，为了适应各种设备，虽然设定了宽度，但是需要调整高度。通常，不能使用固定值，但应使用该比率。

实验表明，任何形式的定心都不如试图让他使用柔性布局来实现定心。

此时，完成。

改变圆圈位置的效果

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。