背景图片下边剪切成圆弧

米斯特肖

于 2020-09-25 17:57:22 发布

阅读量736

点赞数

分类专栏：前端 css

本文链接：https://blog.youkuaiyun.com/xkqbaiyuan/article/details/108801607

版权

本文介绍如何在网页设计中将背景图片的下边缘裁剪为圆弧形状，通过CSS3的clip-path属性和border-radius技巧，创建出独特的视觉效果。详细步骤和代码示例帮助读者理解并应用到自己的项目中。

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

.bjs{
	width: 375px;
	height: 250px;
	clip-path: ellipse(150% 100% at 50% 0%);
}
.bjs div{
	width: 100%;
	height: 100%;
	background-image: url(user-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


<div class="bjs">
	<div></div>
</div>