css 圆角自适应ul

最新推荐文章于 2022-11-30 10:39:17 发布

被蒙蔽了双眼

最新推荐文章于 2022-11-30 10:39:17 发布

阅读量479

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45319500/article/details/113312756

版权

样式

html

			<div class="top">
					<div class="i-row">
						<ul id="ul-top-btn" class="top-btn-list">
							<li class="li-choose">测试数据查询</li>
							<li>数据查询</li>
							<li>当前数据查询</li> 
							<li>过往数据查询</li>
							<li>总数据</li>
						</ul>
					</div>
			</div>

css

.top {
	width: 100%;
	height: 3rem;

}

ul {
	list-style: none;
}

.top-btn-list {
	margin: 0 auto;
	height: 3rem;
	background: #42A3E8CC;
	border-radius: 0.4rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0;
}

#ul-top-btn>li {
	padding: 0 1.5rem;
	color: #FFFFFF;
	font-size: 1.5rem;
	line-height: 3rem;
	font-weight: 400;
	text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

}

li:first-child {
	border-radius: 0.4rem 0 0 0.4rem ;

}

li:last-child {

	border-radius: 0 0.4rem  0.4rem 0;
}

.li-choose {
	background: linear-gradient(180deg, #FFCF4C, #CE6B30);
	box-shadow: 1px 6px 10px 0px rgba(2, 15, 72, 0.4);

}