uni-app 个人中心圆弧

那个小孩丶

于 2022-07-25 09:43:32 发布

阅读量646

点赞数 1

分类专栏： vue 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/qq_33562954/article/details/125968724

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个带有隐藏横轴滚动条的视图组件，并通过伪元素和线性渐变创建独特的背景效果。内容涉及`.wd-bj`类的样式设置，包括溢出隐藏、相对定位、高度定义以及边框圆角等，旨在提升页面视觉体验。

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

<view class="wd">
		<view class="wd-bj"></view>
		<view class="wd-xx"></view>
	</view>

.wd{
	.wd-bj {
		overflow: hidden;
		/* overflow: hidden;不加此属性会导致移动端出现横向滚动条 */
		position: relative;
		height: 457rpx;
	}
	
	.wd-bj::after {
		content: '';
		width: 120%;
		height: 100%;
		position: absolute;
		left: -10%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 50% 50%;
		background: linear-gradient(28deg, #2077F4, #20B6F4);
	}
	.wd-xx{
	}
}