Border Image ng CSS

Border Image ng CSS

Sa pamamagitan ng paggamit ng CSS border-image Attribute, na nagbibigay-daan sa iyo na itakda ang imahen na gagamitin bilang border sa paligid ng elemento.

CSS border-image attribute

CSS border-image Ang attribute ay nagbibigay-daan sa iyo na tukuyin ang imahen na gagamitin sa halip na ordinaryong border.

Ang attribute ay may tatlong bahagi:

  • Ang imahen na ginagamit bilang border
  • Kung saan hahati ang imahen
  • Tinukoy kung dapat ituloy o palakihin ang gitnang bahagi

Ginagamit namin ang imahen na ito ("border.png")

border-image Ang attribute ay tinatanggap ng imahen, at hinahati ito sa siyam na bahagi, tulad ng tic-tac-toe board. Pagkatapos, ilagay ang mga sulok sa sulok at ayusin ang gitnang bahagi ayon sa iyong mga setting.

Babala:Para sa paggawa ng border-image magiging epektibo, ang elemento ay kailangang itakda border Attribute!

Dito, ang gitnang bahagi ng imahen ay pinapatuloy upang gumawa ng border:

Ang imaheng ginagamit bilang border!

Ito ang code:

Halimbawa

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

Subukan nang personal

Dito, ang gitna ng imaheng ginagamit upang gumawa ng border:

Ang imaheng ginagamit bilang border!

Ito ang code:

Halimbawa

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Subukan nang personal

Mga paalala:border-image Ang attribute ay isang maikling pangalan ng sumusunod na mga attribute:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - iba't ibang halaga ng pahilamang ginagamit

Ang iba't ibang halaga ng pahilamang ginagamit ay mababago ang anyo ng border:

Halimbawa 1:

border-image: url(border.png) 50 round;

Halimbawa 2:

border-image: url(border.png) 20% round;

Halimbawa 3:

border-image: url(border.png) 30% round;

Ito ang code:

Halimbawa

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

Subukan nang personal

CSS Border Image Attribute

Attribute Paglalarawan
border-image Isang maikling pangalan na ginagamit para sa lahat ng attribute ng border-image-*.
border-image-source Tinukoy ang linya ng imaheng gamit bilang border.
border-image-slice Specify how to cut the border image.
border-image-width Specify the width of the border image.
border-image-outset Specify the amount by which the border image area exceeds the border box.
border-image-repeat Specify whether the border image should be repeated, rounded, or stretched.