小编cda*_*ata的帖子

CSS3 border-radius剪切问题

我有一个div,其border-radius设置为某个值(比如10px),以及一个嵌套div,它是其父级的全宽和高度.

<!-- ... -->
<style type="text/css">
div.parent {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #0000ff;
    overflow: hidden;
}
div.inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: #ff0000;
}
</style>
<!-- ... -->
<div class="parent">
    <div class="inner"></div>
</div>
<!-- ... -->
Run Code Online (Sandbox Code Playgroud)

我注意到尽管溢出设置为隐藏,但父级不会将子项剪切在圆角周围.另一个stackoverflow线程表明此行为是"按设计":

如何使用CSS3防止图像溢出圆角框?

然而,在挖掘CSS3背景和边界的工作草案时......

http://www.w3.org/TR/css3-background/#corner-clipping

......我忍不住注意到"角落剪裁"部分下面的描述:

剪切到边框或填充边缘的其他效果(例如"溢出"除"可见"之外)也必须剪切到曲线.替换元素的内容始终被修剪为内容边缘曲线

那我错过了什么?内容是否应该被剪切到角落?我在看过时的信息吗?我做错了吗?

html css css3

20
推荐指数
2
解决办法
3万
查看次数

Multi-mixin帮助程序会导致意外的不可分配的编译器错误.我做错了吗?

我正在尝试键入一个multi-mixin辅助函数,它接受构造函数的映射并返回那些用一些新接口扩展的构造函数的映射.

考虑以下设计的基类:

class Alpha { alpha: string = 'alpha'; };
class Beta { beta: string = 'beta'; };
Run Code Online (Sandbox Code Playgroud)

我有一个mixin辅助函数,它接受这些类的映射并返回它们的可选扩展版本.没有打字,它看起来像这样:

// The multi-mixin helper function:
const Fooable = ({ Alpha, Beta }) => {
  const AlphaWithFoo = class extends Alpha {
    foo = 'foo';
  };

  return { Alpha: AlphaWithFoo, Beta };
}

// When invoked, it might be used like this:
const { Alpha: FooAlpha, Beta: FooBeta } = Fooable({ Alpha, Beta });
const fooAlpha = new FooAlpha();

// fooAlpha has …
Run Code Online (Sandbox Code Playgroud)

typescript

8
推荐指数
1
解决办法
139
查看次数

标签 统计

css ×1

css3 ×1

html ×1

typescript ×1