overflow-clip-margin

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

overflow-clip-marginCSS のプロパティで、 overflow: clip を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。 このプロパティで定義される境界は、ボックスのオーバーフロークリップ枠と呼ばれます。

構文

css
/* <length> 値 */
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/* <visual-box> | <length> */
overflow-clip-margin: content-box 5px;

/* グローバル値 */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;

<visual-box> 値(既定値は padding-box)は、オーバーフロークリップ枠の原点として使用するボックス枠を指定します。 overflow-clip-margin で指定する <length> の値は負の値であってはなりません。

メモ: overflow: clip を持たない要素では、このプロパティは無視されます。

公式定義

初期値0px
適用対象すべての要素
継承なし
計算値the computed <length> and a <visual-box> keyword
アニメーションの種類離散値

形式文法

overflow-clip-margin = 
<visual-box> ||
<length [0,∞]>

<visual-box> =
content-box |
padding-box |
border-box

HTML

html
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>

CSS

css
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

仕様書

Specification
CSS Overflow Module Level 3
# overflow-clip-margin

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-clip-margin
border-box
Experimental
content-box
Experimental
padding-box
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報