css实现Chrome标签栏

如图这是一个特殊的带有圆角的导航栏，实现这种效果并不难

这是我实现的效果：

淡一点的就是鼠标悬停的样式

以下是代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><nav class="tab"><a class="tab-item">用户管理</a><a class="tab-item active">配置管理</a><a class="tab-item">角色管理</a><a class="tab-item">定时任务补偿</a></nav></body><style>.tab {display: flex;background-color: #efc0b8;padding: 10px 15px 0 15px;font-size: 14px;}.tab-item {position: relative;padding: 10px 35px;margin: 0 -15px;cursor: pointer;transition: 0.2s;-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='67' height='33' viewBox='0 0 67 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27 0c-6.627 0-12 5.373-12 12v6c0 8.284-6.716 15-15 15h67c-8.284 0-15-6.716-15-15v-6c0-6.627-5.373-12-12-12H27z' fill='%23F8EAE7'/%3E%3C/svg%3E")12 27 15;}.tab-item.active {background: #f8eae7;z-index: 1;}.tab-item:hover {background: #f2d0ca;}</style>
</html>

至此，类似Chrome标签栏的样式就已经完成啦，

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/89612.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！