CSS 内凹圆角

某公司摸鱼前端

已于 2023-07-12 16:08:41 修改

阅读量608

点赞数

文章标签： css 前端 javascript

于 2023-07-12 16:08:22 首次发布

本文链接：https://blog.csdn.net/weixin_59685936/article/details/131684209

版权

<div class="infos">
	<div class="rediusTL"></div>
	<div class="rediusTR"></div>
	<div class="rediusBL"></div>
	<div class="rediusBR"></div>
</div>

<style lang="scss" scoped>
    .infos{
		margin: 32rpx 0;
		height: 880rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		
        .rediusTL,.rediusTR,.rediusBL,.rediusBR{
			width: 50%;
			height: 50%;
		}
		.rediusTL{
			background-image: radial-gradient(50rpx at top left,#fff 50rpx,#eee);
		}
		.rediusTR{
			background-image: radial-gradient(50rpx at top right,#fff 50rpx,#eee);
		}
		.rediusBL{
			background-image: radial-gradient(50rpx at bottom left,#fff 50rpx,#eee);
		}
		.rediusBR{
			background-image: radial-gradient(50rpx at bottom right,#fff 50rpx,#eee);
		}
</style>

上效果图：