大佬教程收集整理的这篇文章主要介绍了html – 如何在CSS中创建曲线和重叠菜单选项卡,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
如果不使用背景图像,是否可以仅使用CSS进行此类菜单?
为了更好地理解,请附上下面的菜单示例.想知道如何仅使用CSS将部件标记为红色.
请提前帮助,谢谢.
nav li { display: inline-block; border-bottom: 1px solid #8BBF50; margin-left: -20px; } nav a { text-decoration: none; color: #fff; BACkground: #8BBF50; position: relative; display: inline-block; margin: 0 22px; padding: 8px 11px; text-shadow: 0 1px 0 rgba(0,2,0.4); border-radius: 7px 7px 0 0; /* just to smooth the top edges */ } nav a:before,nav a:after { content: " "; position: absolute; top: 0; width: 23px; height: 100%; BACkground-color: inherit; } nav a:before { border-radius: 12px 0 0 0; transform: skew(-24deg); left: -13px; /* play with this one to give the LI border ~2px extrusion */ } nav a:after { border-radius: 0 12px 0 0; transform: skew(24deg); right: -13px; /* play with this one to give the LI border ~2px extrusion */ border-right: 1px solid #628E2F; z-index: 1; /* overlap next element */ } /* LI ACTIVE */ nav li.active { border-bottom: 1px solid #fff; } nav li.active a { color: #8BBF50; BACkground: #fff; } nav li.active a:before { z-index: 1; /* overlap prev element */ } nav li.active a:after { border-bottom: 1px solid #fff; }
<nav> <ul> <li><a>Home</a></li> <li class="active"><a>About</a></li> <li><a>Products</a></li> <li><a>Map</a></li> <li><a>Contact</a></li> </ul> </nav>
上面没有提供标签底部的凹曲率,而是使用LI元素边框底部2px挤压给眼睛带来轻微的感觉.不完美但仍然是一个很好的解决方案
以上是大佬教程为你收集整理的html – 如何在CSS中创建曲线和重叠菜单选项卡全部内容,希望文章能够帮你解决html – 如何在CSS中创建曲线和重叠菜单选项卡所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。