用css画一个半圆弧(以小程序为例)

一、html结构

圆弧的html结构是 两个块级元素嵌套。

javascript 复制代码
 <View className='wrap'>
          <View className="inner">
            {/* 图标下的内容 */}
          </View>
 </View>

二、css样式:原理是两个半圆叠在一起,就是一个半圆弧。那么,如何画一个半圆。

补充知识:border-radius的写法:

1、一个参数时,代表四个角都是这个值。

2、两个参数时,第一个参数代表:左上、右下(主对角线) ,第二个参数代 表:右上、左下(副对角线)

3、三个参数时、第一个参数代表:左上 ,第二个参数代表:右上、左下,第三个代表:右下

3、四个参数时、第一个参数代表:左上 ,第二个参数代表:右上,第三个代表:右下,第四个参数代表左下

javascript 复制代码
.wrap {
                background: linear-gradient(to right, #55bfe9, #54aee5, #519ee1, #4e86db, #4d7ed8);
                width: 600px;
                height: 300px;
                display: flex;
                justify-content: center;
                // 为了让内嵌的圆的位置在外层圆的底部。营造一种拱形的感觉
                align-items: flex-end;
                // 这是画半圆的关键 左上右上的数值为高的一半 下面不动
                border-radius: 300px 300px 0 0;

                .inner {
                    box-sizing: border-box;
                    background: #fff;
                    width: 460px;
                    height: 230px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 230px 230px 0 0;

                    .graphContent {
                        margin-top: 91px;

                    }

                }
            }

效果图~~~

相关推荐
扶苏100223 分钟前
“解构”与“响应”的博弈——深入剖析 Vue 3 的 toRef 与 toRefs
前端·javascript·vue.js
Channing Lewis1 小时前
zoho crm的子表添加行时,有一个勾选字段,如何让它在details页面新建子表行(点击add row)时默认是勾选的
开发语言·前端·javascript
董员外2 小时前
LangChain.js 快速上手指南:模型接入、流式输出打造基础
前端·javascript·后端
千寻girling2 小时前
面试官 : “ 请问你实际开发中用过 函数柯理化 吗? 能讲一下吗 ?”
前端·javascript·面试
change_fate3 小时前
vite 修改base之后需要修改public路径
javascript·vue.js
百锦再4 小时前
线程安全的单例模式全方位解读:从原理到最佳实践
java·javascript·安全·spring·单例模式·kafka·tomcat
程序员林北北4 小时前
【前端进阶之旅】一种新的数据格式:TOON
前端·javascript·vue.js·react.js·typescript·json
linux_cfan4 小时前
Chrome 彻底封杀 Flash 后,安防监控如何实现 RTSP 流无插件播放?(2026解决方案)
javascript·安全·实时音视频·html5
强子感冒了4 小时前
Javascript学习笔记:BOM和DOM
javascript·笔记·学习
Never_Satisfied4 小时前
在c#中,抛出异常,并指定其message的值
java·javascript·c#