CSS mask-clip ominaisuus

Edellinen sivu mask
Seuraava sivu mask-composite

定义和用法

mask-clip 属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 属性的不同值：

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
mask-clip: stroke-box;
mask-size: 100% 100%;
  .mask1 {
mask-clip: stroke-box;
mask-clip: border-box;
  .mask2 {
mask-clip: stroke-box;
mask-clip: content-box;
  .mask3 {
mask-clip: stroke-box;
mask-clip: padding-box;
  .mask4 {
mask-clip: stroke-box;
mask-clip: fill-box;
  .mask5 {
mask-clip: stroke-box;

}

Kokeile itse

CSS-kieli

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Ominaisuusarvo	Arvo
Oletusarvo:	Kuvaus
Piirrettävä sisältö leikataan reunakehikkoon (border box). Oletusarvo.	content-box
Piirrettävä sisältö leikataan sisällön kehikkoon (content box).	padding-box
Piirrettävä sisältö leikataan sisäpuolen tyhjiön kehikkoon (padding box).	fill-box
Piirrettävä sisältö leikataan objektin reunakehikkoon (object bounding box).	stroke-box
Piirrettävä sisältö leikataan ääriviivojen reunakehikkoon (stroke bounding box).	view-box
Käytä lähintä SVG näkymäaluetta viitekehikkona.	no-clip
Ei leikkausta.	border
Sama kuin border-box.	padding
Sama kuin padding-box.	content
Sama kuin content-box.	text
Aseta tämä ominaisuus sen oletusarvoon. Katso:	Aseta peittokuvaleikkaus elementin tekstiin. Aseta tämä ominaisuus sen oletusarvoon. Katso:Animointiin liittyvät attribuutit
Periisi isäntäelementistä tämän ominaisuuden. Katso:	initial Periisi isäntäelementistä tämän ominaisuuden. Katso:Animointiin liittyvät attribuutit

inherit

Tekninen yksityiskohta	Oletusarvo:
border-box	Perintä:
Ei	Animaation tekeminen:Ei tuettu. Katso:Animointiin liittyvät attribuutit
.	Versio:
CSS Masking Module Level 1	JavaScript-kieli: