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-margin は CSS のプロパティで、 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

ブラウザーの互換性

BCD tables only load in the browser

関連情報