html – 如何在div中添加外圆角？

概述我希望在选定的侧边栏项目中添加“外部”圆角,以提供此项目“倾注”到内容中的效果. 在下面的例子中,我希望.top有一个带有灰色背景的圆角右下角,以及.bottom的类似右上角.你怎么看？ 我正在使用Twitter Bootstrap和LESS,如果这样可以更容易. jsFiddle：http://jsfiddle.net/3YXb2/ 转过来： 进入这个： 标记： <div class="wrap 我希望在选定的侧边栏项目中添加“外部”圆角,以提供此项目“倾注”到内容中的效果.

在下面的例子中,我希望.top有一个带有灰色背景的圆角右下角,以及.bottom的类似右上角.你怎么看？

我正在使用Twitter bootstrap和LESS,如果这样可以更容易.

Jsfiddle：http://jsfiddle.net/3YXb2/

转过来：

进入这个：

标记：

<div >    <div >        <div >            <p>top</p>        </div>        <div >            <p>MIDdle</p>        </div>        <div >            <p>Bottom</p>        </div>    </div>    <div >        <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;    }

jsFiddle example

总结

以上是内存溢出为你收集整理的html – 如何在div中添加外圆角？全部内容，希望文章能够帮你解决html – 如何在div中添加外圆角？所遇到的程序开发问题。

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