overflow-clip-margin

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

overflow-clip-margin CSS 屬性用於設定一個帶有 overflow: clip 的元素在被裁剪之前,可以超出其邊界繪製的距離。這個屬性定義的邊界被稱為盒子的溢位裁剪邊緣

語法

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

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

/* Global values */
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
應用於所有元素
繼承性
計算值計算後的 <length> 和一個 <visual-box> 關鍵詞
動畫型別離散

正式語法

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;
}

結果

規範

規範
CSS 溢位模組第 3 級
# overflow-clip-margin

瀏覽器相容性

另見