Border-image қасиеті
border-image қасиеті шекараға арналған
суретті орнатады, бұл қасиет
border-image-source,
border-image-slice,
border-image-repeat,
border-image-width
және border-image-outset
қасиеттерінің қысқартылған түрі болып табылады.
Бұл қысқартылған қасиет CSS-те қысқартылатын
қасиеттерден бұрын пайда болғандықтан, ескі
браузерлердің көбірек санында қолдау көрсетеді.
Синтаксис
селектор {
border-image: url(суретке жол) үзінді/қалыңдық/жылжу қайталау;
}
Сипаттама
Біз шекараға қолдануды қалайтын сурет арнайы
түрде рәсімделуі керек: 4 бұрыштар үшін
кіші суреттер және 4 жақтар үшін суреттер.
Мұндай суреттің мысалы:
Бұл жағдайда орталық бөлік ақ түсте қалдырылған (өйткені біз оның элемент фонына түсуін қаламаймыз). Толтырылған орталық бөлігі бар суреттің мысалы:
slice мәні браузерге суреттің қандай
бөліктері бұрыштарға, ал қайсысы жақтарға баратынын
(және қай бөлігі орталық болатынын) көрсетеді.
Бұрыштарға 4 бөлік, жақтарға 4 бөлік
және бір бөлік (орталық) элемент фонына барады
(міндетті емес, fill кілт сөзі).
Сурет келесі түрде бөліктерге "бөлінеді":
slice мәні үшін бірден төртке дейін мән
көрсетіледі. Мысалмен қарастырайық. Мына мәндер
көрсетілген деп алайық: 10 20 30 40 (пиксельдер px
көрсетілмейді, бұл суреттің растрлық да, векторлық
да болуымен байланысты). Мәндер мынаны білдіреді:
10 жоғарыдан кесіп алу, 20 оң жақтан
кесіп алу, 30 төменнен кесіп алу, 40
сол жақтан кесіп алу. Суреттің қай бөлігі сол жоғарғы
бұрышқа түседі? Бұл мына бөлік болады:
10 жоғарыдан, 40 сол жақтан. Оң жоғарғы
бұрышқа 10 жоғарыдан, 20 оң жақтан түседі.
Және т.б.
Көбінесе сурет симметриялы болады (жоғарыдағы ромбстер
сияқты) және бізге бұрыштарға бірдей бөліктерді кесіп
алу керек болады. Онда бір мән көрсетіледі, ол барлық
жақтардан бірдей ауыстыруларды белгілейді. Қызғылт сары
ромбстерді кесіп алу үшін біз slice мәнін 26 деп
көрсетеміз (себебі қызғылт сары ромбстың өлшемі 26px
26px). Сары ромбстер шекара сызықтарына түседі
және олармен мынаны болады: олар не блоктың барлығында
созылады, не шекара бойымен қайталанады (repeat мәніне
байланысты):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: stretch;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
border-image қасиеті элемент шекарасының
қалыңдығын көрсетуге мүмкіндік бермейді. Браузер
суретті бар қалыңдықтағы шекара бойымен жай ғана
созады. Сондықтан оны border қасиеті арқылы
белгілеу керек.
Ескі браузерлердің пайдаланушылары (немесе суреттері
өшірілгендер) border-те белгіленген стандартты
рамканы көреді, сондықтан оған сәйкес стиль мен түсті
белгілеу мағынасы бар.
Мәндері
| Мән | Сипаттама |
|---|---|
| url(Суретке жол) |
Суретке жол. Толығырақ қараңыз border-image-source.
|
| үзінді |
Браузерге суреттің қандай бөліктері бұрыштарға баратынын,
ал қайсысы жақтарға баратынын (және қай бөлігі орталық болатынын) көрсетеді.
Мүмкін мәндер: 1-ден 4-ке дейін сандар | 1-ден 4-ке дейін пайыздар.
Бос орын арқылы сандарға немесе пайыздарға қосымша fill кілт сөзі белгіленуі мүмкін.
Толығырақ қараңыз border-image-slice.
|
| қалыңдық |
Қасиет рамканың көрінетін бөлігінің енін басқарады, оның масштабын өзгертеді.
Егер бұл мән border-width енінен үлкен болса, рамка суреті
мазмұн астына енеді.
Мүмкін мәндер: CSS бірліктері | пайыздар | сан | auto.
Толығырақ қараңыз border-image-width.
|
| жылжу |
Рамканы элемент шегінен тыс ығыстыруға мүмкіндік беретін қызықты қасиет.
Теріс мәндер қолдау көрсетілмейді.
Мүмкін мәндер: CSS бірліктері (% (?) басқа) | оң сан | auto.
Толығырақ қараңыз border-image-outset.
|
| қайталау |
Шекаралардағы суретті қалай қайталау керектігін көрсетеді (бұрыштарда емес):
орналастыру немесе созу.
Мүмкін мәндер: stretch | repeat | round | space.
Толығырақ қараңыз border-image-repeat.
|
Әдепкі мән: none 100%/1/0 stretch
(url(суретке жол) үзінді/қалыңдық/жылжу
қайталау).
Мысал . border-image-repeat: repeat мәні
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . border-image-repeat: stretch мәні
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . border-image-repeat: round мәні
Қазіргі уақытта қалыпты жағдайда
repeat мәні орнатылған, ал тінтуірдің үстіне әкелгенде -
round мәні орнатылады. Тінтуірдің үстіне әкелгенге дейін
шекараға ромбстердің бүтін емес саны сыйғанына, ал үстіне әкелгеннен
кейін - бүтін саны сыйғанына назар аударыңыз. round дәл осылай
жұмыс істейді:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26 round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . border-image-repeat: екі сөз
Ені үшін repeat мәні және биіктігі үшін stretch мәні:
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . Сурет енінің шекара енімен сәйкесуі
Тінтуірдің үстіне әкелгенде border-width-ты үлкейтеміз,
бірақ border-image қалыңдығын сол күйінде қалдырамыз.
Ромбстер барлық шекара бойымен созылады:
<div id="elem"></div>
#elem:hover {
border-width: 52px;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . border-image-slice
Бөліктері әртүрлі басқа суретті алайық:
Суреттен қандай бөліктерді кесіп алу керектігін
көрсетейік - 25% 30% 10% 20%. Бұл
мынадай жұмыс істейді: 25% - жоғарыдан шегініс, 30% - оң жақтан шегініс,
10% - төменнен шегініс, 20% - сол жақтан шегініс.
Негізінен бұл бөліктермен біз бұрыштарды кесіп аламыз.
Жоғарғы сол бұрыш суреттің жоғарғы жағынан 25%,
және сол жағынан 20% болады. Жоғарғы оң бұрыш
суреттің жоғарғы жағынан 25%,
және оң жағынан 30% болады және т.б.
Сондай-ақ, егер сіз тінтуірді блоктың үстіне әкелсеңіз,
fill кілт сөзі іске қосылады, және суреттің орталық
бөлігі біздің блоктың фоны болады:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
border-style: solid;
border-width: 52px;
border-image: url("image.png") 25% 30% 10% 20% stretch;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Мысал
Сызықтық градиент арқылы градиентті шекара жасайық:
<div id="elem"></div>
#elem {
background: green;
border-image: linear-gradient(to bottom, red, blue) 30;
border-width: 30px;
border-style: solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Мысал . border-image-width
border-image-width мәнін 2 деп орнатамыз
(шекара суреті шекараның өзінен 2 есе
үлкен болады) тінтуірді элементтің үстіне әкелгенде
(26/2 - қиғаш сызықтан кейін көрсетілген, бұл
жағдайда 26 - border-image-slice мәні).
Шекараның өзі үлкеймегеніне, ал шекара суреті - иә,
өйткені ол мәтін астына енетініне назар аударыңыз:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/2 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Мысал . border-image-outset
border-image-outset мәнін
3 деп орнатамыз тінтуірді элементтің үстіне әкелгенде.
(26/1/2 - екінші қиғаш сызықтан кейін көрсетілген, бұл
жағдайда 26 - border-image-slice мәні,
ал - 1 - border-image-width мәні):
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/1/3 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Сондай-ақ қараңыз
-
border-image-sourceқасиеті,
ол шекара үшін суретке жолды белгілейді -
border-image-sliceқасиеті,
ол шекара үшін суретті бөлуді белгілейді -
border-image-repeatқасиеті,
ол шекара үшін суретті қайталауды белгілейді -
border-image-widthқасиеті,
ол шекара үшін сурет өлшемін белгілейді -
border-image-outsetқасиеті,
ол шекара үшін суретті жылжуды белгілейді
