带有倒圆角的 css3 菜单
[英] css3 menu with inverse rounded corners
本文介绍了带有倒圆角的 css3 菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我设计了一个导航菜单，看起来像这里的图片:
我想用 css3 圆角和框阴影对其进行编码，而不是使用任何图像.问题是第一个菜单项左侧的圆角，以及菜单右侧的圆角...我称之为反向"圆角...
它应该在 :hover 上改变颜色.
有什么办法可以只在 css 中完成?以及如何?
解决方案
HTML
<ul><li class="menu_item_cont"><div class="menu_item">项目 1</div></li><li class="menu_item_cont"><div class="menu_item">项目 2</div></li><li class="menu_item_cont"><div class="menu_item">项目 3</div></li><div class="outer_bg_right"><div class="外层"><div class="outer_shadow">
CSS
.outer_bg_left, .outer_bg_right {向左飘浮;宽度:70px；背景色:#994；高度:15px；溢出:隐藏；位置:相对；z-索引:10；}.outer_bg_left .outer {高度:25px；边界半径:0 10px 0 0；背景色:#fff;}.outer_bg_right .outer {高度:25px；边界半径:10px 0 0 0；背景色:#fff;}.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {box-shadow: 0 0 5px 2px rgba(0,0,0, .7) 插入；填充底部:10px；底边距:-10px；高度:25px；}.outer_bg_left .outer_shadow {边界半径:0 10px 0 0；左边距:30px；左边距:-30px；}.outer_bg_right .outer_shadow {边界半径:10px 0px 0 0;padding-right: 30px;右边距:-30px；}.menu_item_cont {背景色:#994；边界半径:0 0 10px 10px;box-shadow: 0 0 5px 2px rgba(0,0,0, .7);背景色:#994；显示:块；向左飘浮;}.menu_item {边界半径:0 0 10px 10px;背景色:#994；高度:20px；填充:5px 10px；字体系列:Arial；行高:20px；字体大小:14px；字体粗细:粗体；}.menu_item:悬停{背景色:#000；边框半径:10px；高度:30px；行高:30px；颜色:#fff;}
http://jsfiddle.net/gXQzU/4/
这只是我的第一次尝试，但我认为它看起来很有希望.
I designed a navigation menu which looks like the image here:
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...
It should have to change color on :hover.
Is there any way to get this done in css only? And how?
解决方案
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
.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;
}
http://jsfiddle.net/gXQzU/4/
It's just my first attempt, but I think it looks quite promising.
这篇关于带有倒圆角的 css3 菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
