Border Image ng CSS
- Previous Page Round Corner ng CSS
- Next Page Background 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:
Ito ang code:
Halimbawa
#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 round; }
Dito, ang gitna ng imaheng ginagamit upang gumawa ng border:
Ito ang code:
Halimbawa
#borderimg { border: 10px solid transparent; padding: 15px; border-image: url(border.png) 30 stretch; }
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:
Halimbawa 2:
Halimbawa 3:
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; }
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. |
- Previous Page Round Corner ng CSS
- Next Page Background ng CSS