css-两种画弧线方法

最新推荐文章于 2025-06-04 18:31:15 发布

原创最新推荐文章于 2025-06-04 18:31:15 发布 · 1.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

本文介绍了两种使用CSS实现独特背景效果的方法。第一种利用`::after`伪元素，设置绝对定位，宽高、背景色及边框半径来创建形状。第二种则是直接通过`border-radius`属性，结合百分比值来塑造不规则的背景形状。这些技巧可以用于网页设计中增加视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：::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>