【问题标题】:CSS3 double rounded border, is it possible without 2 divs?CSS3双圆边框,没有2个div可以吗?
【发布时间】:2012-07-03 23:02:04
【问题描述】:

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

在此处查看我的示例:http://jsfiddle.net/eXDjL/

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

我知道有一个-moz-outline-radius property,但是其他浏览器有什么吗?

如果不是,我想我会坚持使用两个 div。

【问题讨论】:

  • 我看到你可以使用'box-shadow',现在就试试吧

标签: css rounded-corners


【解决方案1】:

要模仿不同的颜色边框,您可以使用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;
}

【讨论】:

  • box-shadow 属性在 IE9+、Firefox 4+、Chrome、Opera 和 Safari 5+ 中受支持。为了安全起见,您可能希望列出带有浏览器特定前缀的规则,即-moz-webkit-ms..
猜你喜欢
  • 2011-10-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-06-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-10-15
相关资源
最近更新 更多