CSS3双圆角边框，没有2个div可以吗? [英] CSS3 double rounded border, is it possible without 2 divs?

问题描述

我想知道是否可以在不嵌套 DIV 的情况下创建双圆角边框?

I was wondering if it was possible to create a double rounded border without nesting DIV's?

在这里查看我的示例:http://jsfiddle.net/eXDjL/

第一个框是圆角的，但 ouline 保持方形，第二个框没有圆角，但显示了我想要的边框.

The first box is rounded, but the ouline stays square, the second box has no rounded corners but shows the borders how I want them.

我知道有一个 -moz-outline-radius 属性，但是其他浏览器有什么用吗?

I know there is a -moz-outline-radius property, but anything for the other browsers?

如果不是，我想我会坚持使用两个 div.

If not I guess I'll just stick with two divs.

推荐答案

要模仿不同颜色的边框，您可以使用 box-shadow - http://jsfiddle.net/eXDjL/3/

To mimic different color borders you can use box-shadow - http://jsfiddle.net/eXDjL/3/

.genyx_content_full {
    background-color:#f7f7f7;
    border: #fff 1px solid;
    padding: 10px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 0px 1px #dedede;
}

这篇关于CSS3双圆角边框，没有2个div可以吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！