css两侧为弧形的导航栏

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

导航栏是网站设计中不可或缺的部分,而使用CSS实现两侧为弧形的导航栏可以为网站增添独特的风格。下面是一个简单的示例:.navbar { background-color: #333; display:

导航栏是网站设计中不可或缺的部分,而使用CSS实现两侧为弧形的导航栏可以为网站增添独特的风格。下面是一个简单的示例:

.navbar {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* 设置弧形效果 */
  border-top-right-radius: 50% 20%;
  border-top-left-radius: 50% 20%;
  overflow: hidden;
}

.nav-link {
  color: white;
  padding: 10px;
  text-decoration: none;
}

.nav-link:hover {
  background-color: #555;
} 

在示例代码中,.navbar是导航栏的容器。我们使用flex布局实现左右两个导航链接的对齐,并设置padding为10px以增加美观性。接下来,利用border-top-right-radius和border-top-left-radius属性来实现顶部两侧的弧形效果,并利用overflow:hidden属性来隐藏超出容器的部分。

而.nav-link是导航链接的样式,我们设置颜色为白色,并去除下划线。当鼠标悬停在链接上时,我们使用:hover伪类来改变链接的背景色为#555, 增加反馈效果。

使用以上示例代码,我们即可实现两侧为弧形的导航栏。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两侧为弧形的导航栏

粉丝

0

关注

0

收藏

0

已有0次打赏