border-image-outset касиети
border-image-outset касиети
элементтин чегинен сырткары чек араны жылдырууга мүмкүндүк берет. Маани катары
өлчөө бирдиктери көрсөтүлбөгөн сан
же пайыздардан башка каалаган өлчөм бирдиктери көрсөтүлөт. Эгерде
бирдиксиз сан көрсөтүлсө, анда ал border-width касиетинин маанисине
көбөйтүлүүчү көбөйткүч болуп саналат.
Терс маанилер колдоого алынбайт.
Чек аранын сүрөттөрү жөнүндө кененирээк маалымат алуу үчүн
border-image касиетине караңыз.
Синтаксис
селектор {
border-image-outset: оң сан;
}
Мисал . Сан
border-image-outset касиетинин маанисин
3 кылып, элементтин үстүнө чычканды алып келгенде орнотолу.
Бул учурда чек ара 26px*3 -
3 эсе алыстайт, ал эми анын туурасы
border-width аркылуу берилген:
<div id="elem"></div>
#elem:hover {
border-image-outset: 3;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 100px auto;
}
:
Мисал . Пикселдер
border-image-outset касиетинин маанисин
30px кылып, элементтин үстүнө чычканды алып келгенде орнотолу.
Бул учурда чек ара 30px аралыкка жылат:
<div id="elem"></div>
#elem:hover {
border-image-outset: 30px;
}
#elem {
border-image-repeat: repeat;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 50px auto;
}
:
Ошондой эле караңыз
-
border-imageкасиети,
ал сүрөт-чек арасы үчүн кыскартылган түр -
border-image-sourceкасиети,
ал чек ара үчүн сүрөттүн жолун берет -
border-image-sliceкасиети,
ал чек ара үчүн сүрөттү бөлүп көрсөтөт -
border-image-repeatкасиети,
ал чек ара үчүн сүрөттү кайталоону көрсөтөт -
border-image-widthкасиети,
ал чек ара үчүн сүрөттүн көлөмүн берет