微信小程序：实现左右内凹圆形

最新推荐文章于 2023-12-26 16:54:39 发布

TK_HST

最新推荐文章于 2023-12-26 16:54:39 发布

阅读量3.7k

点赞数 3

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_42908549/article/details/98536227

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

由于本人刚接触小程序，而且大一没认真学CSS，导致基础不好，所以在做项目遇到同学UI设计出来的内凹圆形界面时，确实懵了一会，所幸看了一些API和实例之后摸索出来了。下面看一下实现效果：

一、效果图：

在这里插入图片描述

二、代码部分：

（一）wxml页面

这个页面比较简单,写一个view就可以了！

 <view class="Container"></view>

（二）wxss页面

最重要的就是CSS的实现方式，其中主要的实现方式是通过 radial-gradient() 这个方法来实现，关于这个方法的介绍可以看最下面给出的链接查看。

.Container{
    width: 92%; 
    height: 1100rpx;
    /*最重要的部分如下：*/
    background-image: radial-gradient(circle at 448rpx 260rpx ,transparent 0%, transparent 8px,#fff 8px, #fff 100%);
    background-position: 242rpx -16rpx;
    margin: 28rpx auto;
    border-radius: 14rpx;
}

说明：radial-gradient()：css3的径向渐变，可用于创建图像。上面那串代码简单来说就是以448rpx,260rpx为圆心画圆，在8px为半径以内的为透明色，8px以外的为#fff
而background-position就是圆心的距离，显示起来就是一个圆分隔成两个半圆分别显示在两边。基本就是这样啦！

关于radial-gradient()的详细介绍如下：

（1）https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

（2）https://blog.csdn.net/qq_44607694/article/details/89461930

参考文献：

CSS3径向渐变radial-gradient实现波浪边框和内倒角