代码之家 › 专栏 › 技术社区 › Daniel Bingham

在CSS中强制子对象服从父对象的曲线边界

css css3

Daniel Bingham · 技术社区 · 15 年前

我有一个div在另一个div里面。 #outer #inner #外部 有弯曲的边缘和白色的背景。没有弯曲的边框和绿色的背景。 #内部 #外部

#outer {
  display: block;
  float: right;
  margin: 0;
  width: 200px;
  background-color: white;
  overflow: hidden;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}

<div id="outer">
  <div id="inner"></div>
  <!-- other stuff needs a white background -->
  <!-- bottom corners needs a white background -->
</div>

不管我怎么尝试,它仍然重叠。我该怎么做 #内部 服从并遵守 #外部

编辑

下面的黑客攻击暂时达到了目的。但问题是(也许对CSS3和webbrowser的作者来说): 为什么子元素不服从它们的父元素的曲线边界呢?还有什么可以强迫它们服从的呢?

为了满足我现在的需要,你可以给每个边界指定曲线。所以为了我的目的,我给内部元素的前两个指定了一条曲线。

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

4 回复 | 直到 5 年前

219

Yi Jiang G-Man 15 年前

根据规范:

适当的曲线(由剪裁到边框或填充边 (如溢流除外) 可见)也必须夹在 替换的内容元素始终修剪为内容边曲线。 元素的。

http://www.w3.org/TR/css3-background/#the-border-radius

这意味着 overflow: hidden #outer 应该有用。但是,这对Firefox3.6及以下版本不起作用。这在Firefox4中是固定的:

圆角现在剪辑内容和图像(如果未设置overflow:visible)。

https://developer.mozilla.org/en/CSS/-moz-border-radius

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

看到它在这里工作了吗: http://jsfiddle.net/VaTAZ/3/

Jarrett Widman 15 年前

这会有什么问题?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

tdtje 15 年前

使用这些:

border-top-left-radius: 10px;
border-top-right-radius: 10px; 

-moz-border-radius-topleft
-moz-border-radius-topright

-1

Naveed Butt 15 年前

你试过做这个吗位置:相对内部分区???

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前