CSS property: -webkit-mask-box-image

Description

Defines an image to be used as a mask for a border box.

The uri field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.

You can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat (tiled), stretch, or round (the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).

Syntax

-webkit-mask-box-image: <uri> <top> <right> <bottom> <left> <x_repeat> <y_repeat>;

Values

<uri>

The file path of the image.

<top>

The distance from the top edge of the image.

<right>

The distance from the right edge of the image.

<bottom>

TThe distance from the bottom edge of the image.

<left>

The distance from the left edge of the image.

<x_repeat>

The horizontal repeat style.

<y_repeat>

The vertical repeat style.

Versions