html – 将内角曲线边框添加到活动菜单

概述我正在为主动/选择菜单创建一个内部曲线边框.下面的代码段是我能做的最好的,方角不应该是可见的.谷歌的解决方案似乎没有帮助…请帮我玩吧.多谢你们！ FIDDLE HERE. body { background:#eee;width:90%;margin:20px auto}ul { margin: 0; padding: 0;}ul li { display: inline- 我正在为主动/选择菜单创建一个内部曲线边框.下面的代码段是我能做的最好的,方角不应该是可见的.谷歌的解决方案似乎没有帮助…请帮我玩吧.多谢你们！

FIDDLE HERE.

body {  background:#eee;wIDth:90%;margin:20px auto}ul {  margin: 0;  padding: 0;}ul li {  display: inline-block;  List-style: none;  position: relative;  vertical-align:bottom;}ul li a {  padding: 10px 15px;  display: block;  line-height: 25px;  margin-bottom:-1px;}ul li.active a {  background:#fff;  border:1px solID #aaa;  border-bottom:0;  border-radius:5px 5px 0 0;}ul li.active:before,ul li.active:after {  content:"";  position:absolute;  bottom:-1px;  wIDth:10px;  height:10px;  border:solID #aaa;}ul li.active:before {  left:-10px;  border-radius:8px 0;  border-wIDth:0 1px 1px 0}ul li.active:after {  right:-10px;  border-radius: 0 8px;  border-wIDth:0 0 1px 1px;}.content {  border:1px solID #aaa;background:#fff;height:200px}

<ul>    <li><a href="#">tab 1</a></li>    <li ><a href="#">tab2</a></li>    <li><a href="#">tab3</a></li>    <li><a href="#">tab4</a></li></ul><div ></div>

解决方法 这是我的解决方案.但我希望有更好的解决方案在那里…我使用活动的a的伪元素创建一个白色的边框来隐藏尖角.

body {  background:#eee;wIDth:90%;margin:20px auto}ul {  margin: 0;  padding: 0;}ul li {  display: inline-block;  List-style: none;  position: relative;  vertical-align:bottom;}ul li a {  padding: 10px 15px;  display: block;  line-height: 25px;  margin-bottom:-1px;}ul li.active a {  background:#fff;  border:1px solID #aaa;  border-bottom:0;  border-radius:5px 5px 0 0;}ul li.active:before,ul li.active:after {  content:"";  position:absolute;  bottom:-1px;  wIDth:10px;  height:10px;  border:solID #aaa;}ul li.active:before {  left:-10px;  border-radius:50% 0;  border-wIDth:0 1px 1px 0;  Box-shadow: 1px 1px white;}ul li.active:after {  right:-10px;  border-radius: 0 50%;  border-wIDth:0 0 1px 1px;  Box-shadow: -1px 1px white;}.content {  border:1px solID #aaa;background:#fff;height:200px}

<ul>    <li><a href="#">tab 1</a></li>    <li ><a href="#">tab2</a></li>    <li><a href="#">tab3</a></li>    <li><a href="#">tab4</a></li></ul>  <div ></div>

更新：我以前的答案需要更多的CSS,所以我编辑它.根据jbutler的答案,我得到了关于添加Box-shadow来隐藏角落的想法.我在这里介绍的原始CSS没有什么变化,我只是添加了盒子阴影.更新小提琴HERE.

总结

以上是内存溢出为你收集整理的html – 将内角曲线边框添加到活动菜单全部内容，希望文章能够帮你解决html – 将内角曲线边框添加到活动菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。