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

这篇具有很好参考价值的文章主要介绍了用css画一个半圆弧(以小程序为例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 <View className='wrap'>
          <View className="inner">
            {/* 图标下的内容 */}
          </View>
 </View>

二、css样式:原理是两个半圆叠在一起,就是一个半圆弧。那么,如何画一个半圆。
补充知识:border-radius的写法:
1、一个参数时,代表四个角都是这个值。
2、两个参数时,第一个参数代表:左上、右下(主对角线) ,第二个参数代 表:右上、左下(副对角线)
3、三个参数时、第一个参数代表:左上 ,第二个参数代表:右上、左下,第三个代表:右下
3、四个参数时、第一个参数代表:左上 ,第二个参数代表:右上,第三个代表:右下,第四个参数代表左下

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

                    }

                }
            }

效果图~~~
css画半圆弧线,css,小程序,javascript文章来源地址https://www.toymoban.com/news/detail-729089.html

到了这里,关于用css画一个半圆弧(以小程序为例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效

    css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效!前天逛博客时无意中看见了,别人的博客顶部有一个会左右钟摆的摇晃的红灯笼,产生了想法,我也想给自己做一个,但是网上找了很多方案,都没有实现。终于在昨天晚上搜索,找到了利用css3和js一起组合的技术,实现

    2024年01月20日
    浏览(44)
  • 完成一个有趣的Web期末大作业(html、css、javascript、MySQL、Node.js)

    题目:学校老师的要求很开放,要自己做一个感兴趣的网页,要求使用基础的html、css和javascript,后端要使用数据库。 网上都是各种管理系统,看多了觉得没啥意思,要做一个自己感兴趣的网站。近几年沉迷犬夜叉这部动漫,就花了两天的时间创建了一个犬夜叉的网站,对于

    2024年02月04日
    浏览(47)
  • 写一段圆弧插补算法程序

    以下是一个简单的圆弧插补算法程序的示例: 这个程序实现了一个简单的圆弧插补算法。给定起始点和终点的坐标,以及圆心和半径,它会计算圆心到起始点和终点的向量,然后计算夹角的弧度,最后使用步长来计算插补点。在循环中,程序会不断计算圆弧上的点,并输出它

    2024年01月23日
    浏览(75)
  • 用css画一个csdn程序猿

    效果如下: 头部 我们先来拆解一下,程序猿的结构 两只耳朵和头是圆形组成的,耳朵内的红色部分也是圆形 先画头部,利用圆角实现头部形状 借助工具来快速实现圆角效果 https://9elements.github.io/fancy-border-radius/ 耳朵部分 两只耳朵以头部为定位基准,居中并且向反方向偏移

    2023年04月13日
    浏览(31)
  • 二阶贝塞尔曲线生成弧线

    本文分享一个二阶贝塞尔曲线曲线生成弧线的算法。 示例使用openlayers实现。

    2024年01月22日
    浏览(44)
  • 程序员过中秋丨用代码制作一个祝福小网页(html+css)

    大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即可) 目录 写在前面 效果展示 代码展示 HTML cs

    2024年02月02日
    浏览(74)
  • 情人节程序员用HTML网页表白【520爱心背景3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉

    2024年02月08日
    浏览(111)
  • 情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉

    2024年02月02日
    浏览(59)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(54)
  • 编写一个服务(python为例)

    目前就是采取的 首先服务也是一种程序,但它是一种比较特殊的程序:服务是在系统后台运行、并等待用户或其它软件调用的一类特殊程序。 我们通过执行命令所打开的进程大都属于是交互式进程,如果不采用 nohup 进行处理,那么这些进程基本上都是与终端相关,只要将进程

    2024年02月13日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包