css3菜单具有反圆角 [英] css3 menu with inverse rounded corners
本文介绍了css3菜单具有反圆角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我设计了一个导航菜单,如下图所示:
I designed a navigation menu which looks like the image here:
我想用css3圆角和box-shadows代码,不使用任何图片。
问题是第一个菜单项左边的圆角和菜单右边的圆角...我称之为反向圆角...
I want to code it with css3 rounded corners and box-shadows, not using any images. Problem is the rounded corner to the left of the first menu-item, and the one to the right of the menu... I call it a "reverse" rounded corner...
它应该改变:hover
上的颜色。
在css只做这个完成?如何?
Is there any way to get this done in css only? And how?
推荐答案
HTML
HTML
<div class="menu">
<div class="outer_bg_left">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
<ul>
<li class="menu_item_cont"><div class="menu_item">Item 1</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 2</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 3</div></li>
</ul>
<div class="outer_bg_right">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
</div>
CSS
CSS
.outer_bg_left, .outer_bg_right {
float: left;
width: 70px;
background-color: #994;
height: 15px;
overflow: hidden;
position: relative;
z-index: 10;
}
.outer_bg_left .outer {
height: 25px;
border-radius: 0 10px 0 0;
background-color: #fff;
}
.outer_bg_right .outer {
height: 25px;
border-radius: 10px 0 0 0;
background-color: #fff;
}
.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {
box-shadow: 0 0 5px 2px rgba(0,0,0, .7) inset;
padding-bottom: 10px;
margin-bottom: -10px;
height: 25px;
}
.outer_bg_left .outer_shadow {
border-radius: 0 10px 0 0;
padding-left: 30px;
margin-left: -30px;
}
.outer_bg_right .outer_shadow {
border-radius: 10px 0px 0 0;
padding-right: 30px;
margin-right: -30px;
}
.menu_item_cont {
background-color: #994;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .7);
background-color: #994;
display: block;
float: left;
}
.menu_item {
border-radius: 0 0 10px 10px;
background-color: #994;
height: 20px;
padding: 5px 10px;
font-family: Arial;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.menu_item:hover {
background-color: #000;
border-radius: 10px;
height: 30px;
line-height: 30px;
color: #fff;
}
这只是我的第一次尝试,但我认为它看起来非常有前途。
It's just my first attempt, but I think it looks quite promising.
这篇关于css3菜单具有反圆角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文