我希望在选定的侧边栏项目中添加“外部”圆角,以提供此项目“倾注”到内容中的效果.
在下面的例子中,我希望.top有一个带有灰色背景的圆角右下角,以及.bottom的类似右上角.你怎么看？
我正在使用Twitter Bootstrap和LESS,如果这样可以更容易.
jsFiddle：http://jsfiddle.net/3YXb2/
转过来：
进入这个：
标记：
<div class="wrapper">
<div class="sidebar">
<div class="top">
<p>Top</p>
</div>
<div class="middle">
<p>Middle</p>
</div>
<div class="bottom">
<p>Bottom</p>
</div>
</div>
<div class="container">
<p>Content</p>
</div>
</div>
CSS：
body {
margin:10px;
}
div {
margin:0;
margin-right:-4px;
padding:0;
display:inline-block;
vertical-align:middle;
}
.wrapper {
width:100%;
display:block;
border:1px solid;
}
.container {
background-color:gray;
width:70%;
height:300px;
}
.sidebar {
background-color:white;
width:30%;
height:300px;
}
.middle {
background-color:gray;
}
.top,.middle,.bottom {
width:100%;
height:100px;
display:block;
}
p {
padding:40px 0 0;
margin:0;
text-align:center;
}
解决方法
Css3提供border-radius属性.但请注意,这不适用于IE8或更低版本.有可用的黑客;但他们就是这样：黑客.
用法如下：
.sidebar {
background-color:gray;
width:30%;
height:300px;
}
.middle {
background-color:gray;
}
.top,.bottom {
width:100%;
height:100px;
display:block;
}
.top{
background: white;
border-bottom-right-radius:10px;
}
.bottom{
background: white;
border-top-right-radius: 10px;
}
