css-两种画弧线方法

news2025/1/22 8:04:49

第一种:::after

<template>
	<view>
		<view class="bg">
		</view>
	</view>
</template>
<style>
.bg{
	background-color: pink;
}
.bg::after{
	content: '';
	position: absolute;
	width: 160%;
	height: 100px;
	background: skyblue;
	left: -30%;
	border-radius: 0 0 50% 50%;
}
</style>

第二种:border-radius

<template>
	<view>
		<view class="bg">
		</view>
	</view>
</template>
<style>
.bg{
	background-color: pink;
	border-radius:0 0 50% 50%/40%;
	height: 100px;
	width: 160%;
	margin-left: -30%;
}
</style>

 border-radius:* * /*

 border-radius:50% 50%/50%;
 height: 200px;
 width: 200px;

 

    border-radius:0 0 50% 50%/50%;
    height: 200px;
    width: 200px;

 

     border-radius:0 0 50% 50%/10%;
    height: 200px;
    width: 200px;

 

     border-radius:0 0 50% 50%/90%;
    height: 200px;
    width: 200px;

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408468.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多项目版本管理:monorepo 策略

monorepo 是什么 一个产品会有多个项目&#xff0c;每个项目之间会存在版本同步的问题&#xff0c;如何在其中一个项目发布上线后&#xff0c;保证每个项目版本升级后的版本同步问题&#xff0c;提出的解决方案就是 monorepo 策略。 monorepo 是一种将多个项目代码存储在一个…

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (上)

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨ 文章目录一、前言介绍二、创建goodlist 分支&#xff08;选读*)三、商品列…

H5页面跳转小程序的三种方式

文章目录前言一、web-view标签返回小程序1.小程序启动页面只写web-view标签跳转到授权页面。2.编写auth.html3、把auth.html放到服务器就可以测试访问&#xff0c;打开小程序默认进入启动页面中的webview跳转到H5&#xff0c;授权成功后&#xff0c;通过wx.miniProgram.reLaunc…

Vue自定义网页顶部导航栏

Vue自定义web网页顶部导航栏 说明&#xff1a;此组件是为论坛类项目定制的一个实用的顶部导航栏&#xff0c;当然也可以用于其他的Web项目&#xff0c;只需要稍作修改便可以达到想要的效果。其中导航栏包含了搜索栏&#xff0c;用户头像&#xff0c;以及基本的导航标题。导航栏…

uniapp小程序自定义顶部导航栏,输入框软键盘把顶部顶上去的解决方法

首先在小程序input标签增加:adjust-position"false"的属性&#xff0c;然后已经可以把软键盘不使上方顶出&#xff0c;但是输入框也会因此被遮挡 解决方法&#xff1a;在input输入框聚焦的方法中增加操作 focus"inputBindFocus" 定义方法 inputBindFoc…

【vue3】基础概念的介绍

⭐【前言】 首先&#xff0c;恭喜你打开了一个系统化的学习专栏&#xff0c;在这个vue专栏中&#xff0c;大家可以根据博主发布文章的时间顺序进行一个学习。博主vue专栏指南在这&#xff1a;vue专栏的学习指南 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f…

Vue提升:理解vue中的 slot-scope=“scope“

slot是插槽&#xff0c;slot-scope“scope“语义更加明确&#xff0c;相当于一行的数据&#xff0c;在实际开发中会碰到如下的场景 这个工作状态是变化的&#xff0c;而我们就可以通过后端返回的具体值来判断这里应该显示什么样的内容&#xff0c;具体代码如下 <el-table-co…

利用vue实现登陆界面及其跳转

1.做登录框 步骤&#xff1a; &#xff08;1&#xff09; 创建vue项目&#xff0c;使用vite方式创建&#xff1b;npm init vuelatest &#xff08;2&#xff09;项目结构&#xff1a; src&#xff1a;代码书写位置&#xff1b; app.vue&#xff1a;根组件&#xff1b; main…

vue配置开发环境和生产环境

介绍 本文主要介绍开发、测试以及生产环境的配置。&#xff08;以下内容可根据需求进行配置&#xff09; 步骤 1、在src同级目录也就是根目录下新建文件&#xff1a;.env.development&#xff08;开发环境&#xff09;、.env.test&#xff08;测试环境&#xff09;、.env.pr…

微信小程序授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用(已弃用)

目录更新&#xff1a;wx.getUserProfile() 已弃用背景一、小程序获取用户信息相关接口调整说明二、wx.getUserProfile的使用1. 之前的wx.getUserInfo接口的使用2. 现在的wx.getUserProfile接口的使用三、wx.getUserInfo 切换到 wx.getUserProfile前后对比更多问题可参考&#x…

详解v-for中:key属性的作用

举个栗子 不设置key <div id"app"><div><input type"text" v-model"name"><button click"add">添加</button></div><ul><li v-for"(item, i) in list"><input type&qu…

众多mock工具,这一次我选对了

文章目录写在前面Mock介绍Mock能解决什么问题?传统Mock解决方案Postman接口测试工具Mock js第三方库Eolink解决方案全局Mock高级Mock返回结果Mock智能内置Mock智能自定义Mock约束条件MockEolink的Mock解决方案的优势:写在最后写在前面 交战之前&#xff0c;战士必先利其兵器&…

【node拓展】web开发模式 | express应用程序生成器

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

JavaScript 30 JavaScript 日期格式

JavaScript 文章目录JavaScript30 JavaScript 日期格式30.1 JavaScript 日期输出30.2 JavaScript ISO 日期30.3 ISO 日期&#xff08;年和月&#xff09;30.4 ISO 日期&#xff08;只有年&#xff09;30.5 ISO 日期&#xff08;完整的日期加时、分和秒&#xff09;30.6 时区30.…

关于hash和history的区别和使用

一、区别 1、 history和hash都是利用浏览器的两种特性实现前端路由&#xff0c;history是利用浏览历史记录栈的API实现&#xff0c;hash是监听location对象hash值变化事件来实现 2、 history的url没有’#号&#xff0c;hash反之 3、 相同的url&#xff0c;history会触发添加…

最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云

本文首发&#xff1a;《最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云》 Vue 拖拽组件库&#xff08;drag-and-drop&#xff09;组件在使用 Vue 框架开发中非常常见的需求&#xff0c;做个内容行排序&#xff0c;拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过…

vue中使用echarts实现中国地图

第一种效果&#xff1a;不同省份颜色不同 代码&#xff1a; 注意&#xff1a; ①要实现这种效果&#xff0c;地图数据的name一定要是省份的名字&#xff0c;要不然颜色出不来&#xff1b; ②一定要有visualMap配置&#xff0c;并且它的seriesIndex属性 对应的是series的数组下标…

Vue项目打包部署

前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)&#xff0c;跟着做了一遍&#xff0c;由于本人是第一次尝试&#xff0c;遇见了很多问题。经过查阅和搜索&#xff0c;终于解决掉了。下面给大家介绍一下我的流程和遇见的问题&#xff0c;我们可以多…

Vue3:探讨一下mixin

一、Vue2中的mixin 1、定义要混入的数据对象 // 定义一个 mixin 对象 export const myMixin {created() {this.hello()},methods: {hello() {console.log(hello from mixin!)}} } 2、在需要这些东西的地方去通过mixins获得mixin对象 <template><div><h1>…

浅识WebGL和Three.js

WebGL 想必各位看官大大都了解过&#xff0c;进行3D图形渲染&#xff0c;主要依赖显卡&#xff08;GPU&#xff09;为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样&#xff0c;不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑&#xff0c;所支持…