ਕੋਰਸ ਸਾਲਣਾ

سی ایس ایس مراجع مانیول

CSS ਵਿਸ਼ੇਸ਼ਤਾ

选修课

课程推荐：

CodeW3C.com کا داستان

CSS mask-clip ਪ੍ਰਤੀਯੋਗਿਤਾ

پچھلے پیج mask
آئندہ پیج 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%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

ਸਵੈ ਮੋਹਰੇ ਦੀ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

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

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ	ਵਰਣਨ
border-box	ਚਿੱਤਰਿਤ ਸਮਾਗਮ ਬੋਰਡਰ ਬਾਕਸ (border box) ਵਿੱਚ ਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਮੂਲ ਮੁੱਲ。
content-box	ਚਿੱਤਰਿਤ ਸਮਾਗਮ ਕੰਟੈਂਟ ਬਾਕਸ (content box) ਵਿੱਚ ਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
padding-box	ਚਿੱਤਰਿਤ ਸਮਾਗਮ ਪੈਡਿੰਗ ਬਾਕਸ (padding box) ਵਿੱਚ ਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
fill-box	ਚਿੱਤਰਿਤ ਸਮਾਗਮ ਬੋਰਡਰ ਬਾਕਸ (object bounding box) ਵਿੱਚ ਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
stroke-box	ਚਿੱਤਰਿਤ ਸਮਾਗਮ ਬੋਰਡਰ ਬਾਕਸ (stroke bounding box) ਵਿੱਚ ਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。
view-box	ਨਜ਼ਦੀਕੀ ਸੀਵੀਜੀ ਵਿਜੂਐਲ ਬਾਕਸ ਨੂੰ ਹਵਾਲਾ ਦੇਣ ਵਾਲਾ ਹੈ。
no-clip	ਕੱਟ ਨਹੀਂ ਕਰੋ。
border	border-box ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ。
padding	padding-box ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ。
content	content-box ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ。
text	ਮਾਸਕ ਕਟ ਨੂੰ ਏਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਵਿੱਚ ਕਟ ਕਰੋ。
initial	ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit	ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮਾਤਾ ਏਲੀਮੈਂਟ ਤੋਂ ਵਿਰਾਸਤੀਕਰਣ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ:	border-box
ਵਿਰਾਸਤੀਕਰਣ:	ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ:	ਸਮਰਥਨ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ। ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਗੁਣ。
ਸੰਸਕਰਣ:	CSS ਮਾਸਕਿੰਗ ਮੌਡਿਊਲ ਲੈਵਲ 1
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸ:	object.style.maskClip="padding-box"