clip

clip å±æ§å®ä¹äºåç´ çåªä¸é¨åæ¯å¯è§çãclip å±æ§åªéç¨äº position:absolute çåç´ ã

è¯æ³

css

/* å³é®åå¼ */
clip: auto;

/* <shape> å¼ */
clip: rect(1px, 10em, 3rem, 2ch);

/* å¨å±å¼ */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

å¼

<shape>

ä¸ä¸ªç©å½¢ <shape>

css

rect(<top>, <right>, <bottom>, <left>)   /* æ åè¯æ³ */

css

rect(<top> <right> <bottom> <left>)      /* ååå¼å®¹è¯æ³ */

<top> å <bottom> æå®ç¸å¯¹äºçåä¸è¾¹æ¡è¾¹ç çåç§»ï¼<right> å <left> æå®äºç¸å¯¹äºçåå·¦è¾¹æ¡è¾¹ç çåç§»ã <top>ã<right>ã<bottom> å <left> çå¼å¯ä»¥æ¯ <length> å¼æ autoã

auto

åç´ ä¸è£åª (é»è®¤å¼)

å½¢å¼å®ä¹

åå§å¼	`auto`
éç¨åç´	ç»å¯¹å®ä½åç´
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	`auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise
å¨ç»ç±»å	a rectangle

å½¢å¼è¯æ³

clip = 
  <rect()>  |
  auto      

<rect()> = 
  rect( <top> , <right> , <bottom> , <left> )

ç¤ºä¾

è£åªå¾å

HTML

html

<p class="dotted-border">
  <img src="macarons.png" title="Original graphic" />
  <img id="top-left" src="macarons.png" title="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" title="Graphic clipped towards middle" />
  <img
    id="bottom-right"
    src="macarons.png"
    title="Graphic clipped to bottom right" />
</p>

CSS

css

.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}