Хусусияти border-image-source

Хусусияти border-image-source тасвирро барои ҳудуд муқаррар мекунад. Барои маълумоти муфассалтар ҳусусияти border-image-ро бубинед.

Синтаксис

cssинтихобкунанда {
  border-image-source: url(роҳ ба тасвир);
}

Намуна

Хусусияти border-image-source бояд дар якҷоягӣ бо border-image-slice муқаррар карда шавад:

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Намуна

Агар хусусияти border-image-slice муқаррар нашуда бошад, тамоми тасвир ба гӯшаҳо меафтад (зеро ки border-image-slice дар сурати ногузориш қимати 100% дорад):

html<div id="elem"></div>

css#elem {
  border-image-source: url("image.png");
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Намуна

Ба ҷои тасвир метавон градиенти хатӣ муқаррар кард:

html<div id="elem"></div>

css#elem {
  border-image-source: linear-gradient(to bottom, red, blue);
  border-image-slice: 30;
  border-width: 30px;
  border-style: solid;
  background: green;
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

Результат:

Намуна

Агар хусусияти border-image-slice муқаррар нашуда бошад, градиент ба гӯшаҳо меафтад (зеро ки border-image-slice дар сурати ногузориш қимати 100% дорад):

html<div id="elem"></div>

css#elem {
  border-image-source: linear-gradient(to bottom, red, blue);
  border-width: 30px;
  border-style: solid;
  background: green;
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

Результат:

Намуна

Агар хусусияти border-radius муқаррар карда шавад, дар ҳудуд гирд кардани гӯшаҳо, мутаассифона, рух намедиҳад (ва дар ҳолати градиент низ), гарчанде ки таъсир ҳам хеле ҷолиб хоҳад буд:

html<div id="elem"></div>

css#elem {
  border-radius: 100px;
  border-image-source: url("image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Ҳамчунин бубинед