RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/clip below:

clip - CSS | MDN

/* Keyword value */
clip: auto;

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

/* Global values */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

Values

rect()

A rectangle defined using a rect() function of the form rect(<top>, <right>, <bottom>, <left>). The <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box â that is, the extent of the padding box.

The <top>, <right>, <bottom>, and <left> values may be either a <length> or auto. If any side's value is auto, the element is clipped to that side's inside border edge.

Note: The rect() <shape> function used in the deprecated clip property is different from the CSS rect() function used to define a CSS <basic-shape>.

auto: The element does not clip (default). This is different from rect(auto, auto, auto, auto), which clips to the element's inside border edges.

Formal definition Formal syntax

clip = 
  <rect()>  |
  auto      <rect()> = 

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

Examples Clipping an image

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

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

Specifications Browser compatibility

Loadingâ¦