用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;

                    }

                }
            }

效果图~~~

相关推荐
浪裡遊25 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
汤姆yu1 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
Liudef062 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder4 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句4 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom4 小时前
JavaScript reduce()函数详解
javascript
小飞悟4 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子5 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手5 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅5 小时前
JavaScript 中你不知道的按位运算
前端·javascript