CSS-BORDER
background-clip background-origin
Սահմանում են ֆոնային նկարի ընդլայնման կարգը(կամ ֆոնի գույնը) էլեմենտի ներսում։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | background-clip: border-box background-origin: padding-box |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Ոչ |
Երկու հատկություններն էլ նույնն արժեքներն ունեն՝ բացառությամբ « text »-ից՝ background-clip -ի համար։
Արժեքները նույնն են, բայց ունեն որոշակի տարբերություններ։
Արդեն ծանոթ ենք բլոկ տեսակի էլեմենտների մոդելին «HTML»-ի դասընթացից՝
Եթե padding: 0 – ի է հավասար, ապա padding-box-ը նույնն է ինչ content-box-ը.
Եթե border-ը հավասար է 0-ի, ապա border-box-ը նույնն է ինչ padding-box-ը․
Եթե border-ը և padding-ը հավասար են 0-ի, ապա border-box-ը, padding-box-ը և content-box նույնն են․
background-clip -ի արժեքներն են՝
border-box – ֆոնային նկարը(կամ գույնը) տարածվում է ամբողջ էլեմենտով՝ ընդգրկելով նաև padding-box -ի տարածքը։ border-box-ի սահմանում տարածվում է նկարի կրկնությունը(եթե այն չեղարկված չէ background-repeat: no-repeat -ով)։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-clip: border-box;
background-size: cover;
padding: 40px;
width: 510px;
height: 330px;
}
padding-box – ֆոնային նկարը պետք է տարածվի սկսած էլմենտի padding-box -ից։ Ֆոնը border-box -ում չի կրկնվի։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-clip: padding-box;
background-size: cover;
padding: 40px;
width: 510px;
height: 330px;
}
content-box –ֆոնային նկարը տարածվում է padding-box -ից, բայց կտրվում է մինչև content-box-ը։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-clip: content-box;
background-size: cover;
padding: 40px;
width: 510px;
height: 330px;
}
text –ֆոնային նկարը ցուցադրվում է միայն տեքստի ներսում։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;;
background-clip: text;
background-size: cover;
padding: 40px;
color: transparent;
font-weight: bold;
font-size: 60px;
display: flex;
justify-content: center;
}
background-origin -ը սահմանում է նկարի սկզբնական դիրքը։
Ունի երեք արժեք՝
border-box – ֆոնային նկարի սկզբնական դիրքը կսկսի border-box-ի եզրից։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-origin: border-box;
background-size: cover;
padding: 40px;
width: 510px;
height: 310px;
}
padding-box – ֆոնային նկարի սկզբնական դիրքը կսկսի padding-box-ի եզրից։
border-box-ի սահմանում կտարածվի նկարի կրկնությունը(եթե այն չեղարկված չէ background-repeat: no-repeat արժեքով)։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-origin: padding-box;
background-size: cover;
padding: 40px;
width: 510px;
height: 310px;
}
content-box – ֆոնային նկարի սկզբնական դիրքը կսկսի content-box-ից։ border-box -ում և padding-box -ում նկարի կրկնությունն է։
.example {
background: url(image-road-02.png);
background-color: orange;
border: 40px dashed red;
background-origin: content-box;
padding: 40px;
width: 510px;
height: 310px;
}
border։
border։ –նախատեսված է մի քանի արժեքներ սահմանելու համար՝ սահմանագծի լայնությունը, ոճը և գույնը։Հերթականությունը կարևոր չէ։
Էլեմենտի միայն մի կողմին border սահմանելու համար օգտագործվում են հետևյալ հատկությունները՝ border-top, border-bottom, border-left, border-right։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | ․․․․․․․․․․ |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
border-ի ոճերը հետևյալ նկարում՝
div {
margin: 20px;
width: 600px;
height: 300px;
border: 10px inset rgba(255, 238, 0, 1);
background: orange;
padding: 30px;
}
border-width
border-width – Որոշում է սահմանագծի չորս կողմերի լայնությունը, եթե նշված է մեկ արժեք:
Հնարավոր է սահմանագծի տարբեր կողմերի համար տարբեր լայնություններ որոշել՝
մեկ արժեքի դեպքում – լայնութոյուն կսահմանվի չորս կողմերին միաժամանակ։
երկու արժեքի դեպքում – առաջին արժեքը լայնություն կսահմանի վերևի ու ներքևի կողմերին, երկրորդ արժեքը՝ ձախ և աջ կողմերին։
երրեք արժեքի դեպքում – առաջինը լայնություն կսահմանի վերևին, երկրորդը՝ ձախ և աջ կողմերին, երրորդը՝ ներքևին։
չորս արժեքի դեպքում – հերթականությամբ բոլոր կողմերի համար՝ վերևի, աջակողմյան, ներքևի և ձախակողմյան։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | medium |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
thin – նույնն է ինչ 2 պիքսելը։
medium – նույնն է ինչ 4 պիքսեկը։
thik – նույնն է ինչ 6 պիքսեկը։
voreveTiv – ցանկացած թիվ չափման միավորով։
div {
margin: 20px;
width: 300px;
height: 130px;
border: solid black;
border-width: 5px 10px 15px 20px;
background: orange;
padding: 30px;
}
border-style:
border-style: – Որոշում է սահմանագծի չորս կողմերի ոճը, եթե նշված է մեկ արժեք:
Հնարավոր է սահմանագծի տարբեր կողմերին տարբեր ոճեր որոշել՝
մեկ արժեքի դեպքում – ոճ կսահմանի չորս կողմերին միաժամանակ։
երկու արժեքի դեպքում – առաջին արժեքը ոճ կսահմանի վերևի ու ներքևի կողմերին, երկրորդ արժեքը՝ ձախ և աջ կողմերին։
երեք արժեքի դեպքում – առաջինը ոճ կսահմանի վերևին, երկրորդը՝ ձախ և աջ կողմերին, երրորդը՝ ներքևին։
չորս արժեքի դեպքում – հերթականությամբ բոլոր կողմերի համար՝ վերևի, աջակողմյան, ներքևի և ձախակողմյան։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | none |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none – սահմանագիծը չի ցուցադրվի և լայնությունը հավասար կլինի 0-ի։
hidden – սահմանաիծը չի ցուցադրվի բայց որոշ դեպքերում դրա լայնությունը կպահպանվի։
div {
margin: 20px;
width: 300px;
height: 130px;
border: 10px black;
border-style: double dashed inset dotted;
background: orange;
padding: 30px;
}
border-bottom։
border-bottom։ – էլեմենտի միայն ներքևի կողմին կսահմանի սահմանագիծ։
Կարող է ընդունել երեք արժեք՝ border-ի լայնությունը, ոճը և գույնը, որի հերթականությունը կարևոր չէ։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | ․․․․․ |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Սահմանագծի ոճի տեսակներն են՝
div {
margin: 20px;
width: 600px;
height: 300px;
border-bottom: 10px dashed black;
background: orange;
padding: 30px;
}
border-bottom-width:
border-bottom-width: – սահմանում է էլեմենտի ներքևի սահմանագծի լայնությունը։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | medium |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
thin – նույնն է ինչ 2px-ը;
medium – նույնն է ինչ 4px-ը։
thik – նույնն էինչ 6px-ը։
voreveTiv – ցանկացած թիվ px-ով կամ այլ չափման միավորով։
div {
margin: 20px;
width: 600px;
height: 300px;
border-bottom: dashed black;
border-bottom-width: thik;
background: orange;
padding: 30px;
}
border-bottom-style:
border-bottom-style: – սահմանում է էլեմենտի ներքևի սահմանագծի ոճը։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | Չկա |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
div {
margin: 20px;
width: 600px;
height: 300px;
border-bottom: 10px black;
border-bottom-style: double;
background: orange;
padding: 30px;
}
border-bottom-color։
border-bottom-color։ – սահմանում է էլեմենտի ներքևի սահմանագծի գույնը։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | ․․․․․ |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
voreveGuyn – ցանկացած գույն։
transparent – սահմանում է թափանցիկ, այսինքն սահմանագիծը կա, բայց չի երևում։
div {
margin: 20px;
width: 600px;
height: 300px;
border-bottom: 10px dashed;
border-bottom-color: red;
background: orange;
padding: 30px;
}
border-left border-left-color border-left-style border-left-width
Ձախ կողմի սահմանագծի հատկություններն են։
border-left-ն ունիվերսալ հատկություն է և նրանում հնարավոր է սահմանել border-left-color, border-left-style և border-left-width արժեքները։
Հակիրճ տվյալները համապատասխանում են մինչ այս նշված հատկությունների տվյալներին(border, border-style և այլն)։
border-right border-right-color border-right-style border-right-width
Աջ կողմի սահմանագծի հատկություններն են։
border-right-ն ունիվերսալ հատկություն է և նրանում հնարավոր է սահմանել border-right-color, border-right-style և border-right-width արժեքները։
Հակիրճ տվյալները համապատասխանում են մինչ այս նշված հատկությունների տվյալներին(border, border-style և այլն)։
border-top border-top-color border-top-style border-top-width
Վերևի կողմի սահմանագծի հատկություններն են։
border-top-ն ունիվերսալ հատկություն է և նրանում հնարավոր է սահմանել border-top-color, border-top-style և border-top-width արժեքները։
Հակիրճ տվյալները համապատասխանում են մինչ այս նշված հատկությունների տվյալներին(border, border-style և այլն)։
.div01 {
margin: 10px 1px;
width: 550px;
height: 400px;
background: brown;
border-top: 25px double red;
border-right: 25px dashed blue;
border-bottom: 25px ridge orange;
border-left: 25px dotted yellow;
border-radius: 90px 90px 65px 65px / 45px 45px 65px 65px;
}
.div02 {
padding: 10px 10px;
color: orange;
}
border-bottom-left-radius
շրջանակի ներքևի ձախ անկյունին, կամ հիմնական ֆոնին սահմանում է կորություն։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
Որպես արժեք նշվում է որևէ թիվ՝ ցանկացած չափման միավորով։
Կարելի է նշել երկու արժեք, որի դեպքում կստացվի էլիպսաձև անկյուն։ Առաջին արժեքը կվերաբերի հորիզոնական ուղղությանը, երկրորդը՝ ուղղահահայց։
div {
margin: 20px;
width: 200px;
height: 70px;
border-bottom: 10px double black;
border-bottom-left-radius: 45px;
background: orange;
padding: 30px;
}
border-bottom-right-radius:
Շրջանակի ներքևի աջ անկյունին, կամ հիմնական ֆոնին սահմանում է կորություն։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
Որպես արժեք նշվում է որևէ թիվ՝ ցանկացած չափման միավորով։
Կարելի է նշել երկու արժեք, որի դեպքում կստացվի էլիպսաձև անկյուն։ Առաջին արժեքը կվերաբերի հորիզոնական ուղղությանը, երկրորդը՝ ուղղահահայց։
div {
margin: 20px;
width: 200px;
height: 70px;
border-bottom: 10px double black;
border-bottom-right-radius: 45px;
background: orange;
padding: 30px;
}
border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
պատասխանատու են շրջանակի 4 անկյուններին կորություն սահմանելու համար։
border-radius -ն ունիվերսալ հատկություն է, որում սահմանվում է border-top-left-radius, border-top-right-radius, border bottom-left-radius, border-bottom-right-radius արժեքները։
Հակիրճ տվյալները նշված բոլոր հատկությունների համար՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա |
Ենթարկվում է անիմացիայի | Այո |
border-radius -ում 4 արժեքները հնարավոր է տարբեր կերպ սահմանել՝
մեկ արժեքի դեպքում –կորություն կսահմանի էլեմենտի բոլոր չորս անկյուններին միաժամանակ։
երկու արժեքի դեպքում – առաջին արժեքը կորություն կսահմանի վերևի ձախ և ներքևի աջ անկյուններին, երկրորդ արժեքը՝ վերևի աջ և ներքևի ձախ անկյուններին։
երրեք արժեքի դեպքում – առաջին արժեքը կորություն կսահմանի վերևի ձախ անկյանը, երկրորդը վերևի աջ և ներքևի ձախ անկյուններին, երրորդը՝ ներքևի աջ անկյանը։
չորս արժեքի դեպքում – հերթականությամբ էլեմենտին կորություն կսահմանի՝ վերևի ձախ, վերևի աջ, ներքևի աջ և ներքևի ձախ անկյուններին։
Կորությունը էլիպսաձև սահմանելու համար border-radius-ում « / » սիմվոլի միջոցով առանձնացվում են կողմերի արժեքները՝ հորիզոնական և ուղղահայաց։
.ellipse-container {
width: 200px;
height: 100px;
background-color: #3498db;
border-radius: 20% 25% / 30% 35% / 40% 45% / 50% 55%;
}
արժեքները կսահմանվեն նաև երկու խմբով՝ նախ հորիզոնական, հետո՝ ուղղահայաց։
div {
border-radius: 30px 50px 100px 50px / 100px 50px 50px 50px;
}
border-end-end-radius border-end-start-radius border-start-start-radius border-start-end-radius
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա։ Եթե border-collapes-ը հավասար է collapse-ի, չեն աշխատի table-ի և inline-table-ի համար։ |
Ենթարկվում է անիմացիայի | Այո |
border-end-end-radius-ը համապատասխանում է բլոկի՝ էլէմենտի ներքևի աջ անկյանը,
border-end-start-radius-ը էլէմենտի ներքևի ձախ անկյանը,
border-start-start-radius ը էլէմենտի վերևի ձախ անկյանը,
border-start-end-radius ը էլէմենտի վերևի աջ անկյանը։
Դրանց հնարավոր է սահմանել մեկ կամ երկու արժեք։ Մեկի դեպքում կորությունը շրջանաձև կլինի, երկու արժեքի դեպքում կսահմանվի կորության էլիպսաձև տեսակը։
Կորության կողմը փոփոխվում է writing-mode, direction, text-orientation հատկություններին համապատասխան։
body {
display: flex;
justify-content: center;
height: 500px;
align-items: center;
font-size: 15px;
}
div {
width: 300px;
height: 300px;
padding: 30px;
color: white;
font-size: 20px;
font-weight: bold;
margin-right: 100px;
}
.div01 {
border-start-start-radius: 200px 80px;
direction: rtl;
background: red;
}
.div02 {
border-top-left-radius: 200px 80px;
direction: rtl;
background: green;
}
hayti
كما ترون في العرض التوضيحي التالي، عندما يتم تبديل اتجاه النص من اليسار
إلى اليمين إلى اليمين إلى اليسار،
كما ترون في العرض التوضيحي التالي، عندما يتم تبديل اتجاه النص من اليسار
إلى اليمين إلى اليمين إلى اليسار،
Առաջին օրինակում սահմանված է “border-start-start-radius: 200px 80px;”(վերևի ձախ կողմ), ուստի տեքստի ուղղությունը փոխելիս(direction: rtl – աջակողմյան գրելաձև) փոխվում է նաև կորության կողմը(վերևի աջ կողմ)։
Երկրորդ օրինակում սահմանված է “border-top-left-radius: 200px 80px;”(վերևի ձախ կողմ)․ տեքստի ուղղությունը փոխելիս(direction: rtl – աջակողմյան գրելաձև) չի փոխվում կորության կողմը։
Արժեքները հնարավոր է նշել տարբեր չափման միավորներով։ %-ի դեպքում հաշվի կառնվի էլեմենտի լայնությունը հորիզոնական կորացման համար և բարձրությունը ուղղահայաց կորացման համար։
div {
width: 300px;
height: 500px;
background: orange;
border: 5px solid black;
writing-mode: horizontal-tb;
border-end-end-radius: 20%;
}
Վերը նշված օրինակում border-end-end-radius-ը մեկ արժեքով է՝ կորությունը պետք է շրջանաձև լինի, բայց նկարում այն էլիպսաձև է։
Արժեքը նշված է տոկոսով, ուստի հաշվի կառնվի հիմնական էլեմենտի լայնությունը հորիզոնական կորացման համար և բարձրությունը ուղղահայաց կորացման համար։
Հիմնական էլեմենտի լայնությունն ու բարձրությունը տարբերվում են(width-300px, height-500px), ուստի ստացվել է էլիպսաձև կորություն։
Եթե հաշվենք լայնության և բարձրության 20%-ն առանձին, ապա կստացվի՝ 60px, 100px, ուստի border-end-end-radius: 20% -ը նույնն է ինչ border-end-end-radius: 60px 100px -ը․ քանի որ արժեքը երկուսն են, ուստի կորությունը էլիպսաձև կլինի։
border-image
border-image –ունիվերսալ հատկություն է, որին սահմանվում է մի քանի արժեքներ։
border-image –ն օգտագործվում է, երբ էլեմենտի համար որպես սահմանագիծ՝ շրջանակ, անհրաժեշտ է նկար օգտագործել։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | none |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա, բացառությամբ նրանց, որոնց border-collapse-ը հավասար է collapse -ի: |
Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
none –նկարը չի պատկերվում որպես շրջանակ․ դրա փոխարեն էլեմենտը կունենա սովորական border, եթե այն սահմանված լինի տվյալ էլեմենտի համար։
url(nkari hascen) – սահմանում է նկարի հասցեն, որն էլեմենտի համար հանդիսանալու է որպես շրջանակ։ url-ի՝ նկարի փոխարեն հնարավոր է նաև linear և radial գրադիենտներ սահմանել։ Օրինակը կտեսնենք քիչ անց։
voreveTiv – նույնն է ինչ border-image-slice հատկությունը։ Թվով նշվում է, թե նկարի յուրաքանչյուր կողմից(4 կողմերից) քանի միավոր, կամ քանի տոկոս դեպի ներս տարածություն պիտի վերցվի շրջանակը ստանալու համար(յուրաքանչյուր կողմից դեպի ներս տարածությունը հավասար է 100%-ի)։
Մինչ border -ի հիմնական նկարին անցնելը նայենք հետևյալ օրինակը border-image-slice -ը հասկանալու համար։
border -ի նկարը՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: solid black;
border-width: 50px;
border-image: url(for-border-road.jpg) 50% 20% 30% 60% / 2 2 2 2 stretch
stretch;
}
hayti
Արդյունքը՝
border-ի հիմնական նկարը՝
օրինակը՝
border-ի չորս կողմերի տոկոսը սահմանելուց հետո, նկարը բաժանվելու է 9 մասերի՝ նկարի չորս անկյունները, նկարի 2 հորիզոնական և 2 ուղղահայաց կողմերը և նկարի մեջտեղը որոշելու համար, այսինքն նկարի այն հատվածը, որը շրջանակի՝ border-ի մեջ չի երևալու(կամ կօգտագործվի fill հատուկ բառը և 9-րդ մասը արդեն կհանդիսանա որպես ֆոն տվյալ էլեմենտի համար)։
laynutyun –նույնն է ինչ border-image-width հատկությունը։ Սահմանում է border նկարի %-ով արդեն որոշված չափի(border-image-slice) լայնությունը։
border-image-slice -ի արժեքներից առանձնանում է « / » -ով։ Արժեքը հնարավոր է սահմանել պիքսելով և նմանատիպ չափման միավորներով, կամ ուղղակի նշել որևէ թիվ։
Օրինակ, եթե նշվի 1, ապա border նկարի լայնությունը հավասար կլինի border-width-ի լայնությանը․ քիչ անց ներկայացված օրինակում 1-ը հավասար կլինի 50px-ի։
Հաջորդ չորս արժեքները պատկանում են border-image-repeat հատկությանը։
stretch – border-ի 4 կողմերի համար(5 6 7 8 կողմերը) նկարի կտրված մասերը ձգվում են էլեմենտի ուղղահայաց և հորիզոնական կողմերի երկարության չափով։
repeat – border-ի 4 կողմերի համար(5 6 7 8 կողմերը) նկարի կտրված մասերը կրկնվում են այնքան, որքան անհրաժեշտ է էլեմենտի ուղղահայաց և հորիզոնական կողմերի երկարությունը լրացնելու համար։
round – border-ի 4 կողմերի համար(5 6 7 8 կողմերը) նկարի կտրված մասերը կրկնվում են, բայց դրանք ընդլայնվում են հավասարաչափ, որպեսզի ամբողջական ցուցադրվեն։
space – border-ի 4 կողմերի համար(5 6 7 8 կողմերը) նկարի կտրված մասերը կրկնվում են առանց ձգվելու և ավելանում են այնքան որքան անհրաժեշտ են լրացվելու համար, իսկ դատարկ տարածքը դրանց արանքներում բաժանվում է հավասար մասերի։
Նայենք օրինակներին՝
stretch
repeat
round
space
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: solid black;
border-width: 50px;
border-image: url(ramka.png) 18.8% 18.8% 18.8% 18.8% / 1 1 1 1 round round;
}
.div02 {
padding: 10px 10px;
color: orange;
}
hayti
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis
malesuada mi, ac sagittis……………...
Նկարի փոխարեն հնարավոր է linear գրադիենտ օգտագործել՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image: linear-gradient(orange, black) 34% 34% 34% 34% / 1 1 1 1
stretch stretch;
}
Կամ radial գրադիենտ՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image: radial-gradient(black, yellow, orange) 34% 34% 34% 34% / 1 1 1
1 stretch stretch;
}
Կամ radial գրադիենտ, բայց 9-րդ մասի հետ, որը հայտնվում է fill հատուկ բառի միջոցով՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image: radial-gradient(black, yellow, orange) 34% 34% 34% 34% fill /
1 1 1 1 stretch stretch;
}
border-image-source:
border-image-source: – սահմանում է նկարի հասցեն։
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image-source: url(ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8%;
border-image-width: 1 1 1 1;
border-image-repeat: round round;
}
border-image-slice
border-image-slice – որոշվում է նկարի 9-ը մասերը, երբ նկարի 4 կողմերի համար տոկոս է սահմանում(Տես՝ border-image)։
4 արժեքները կարող են տարբեր կերպ սահմանվել՝
մեկ արժեքի դեպքում –արժեքը կպատկանի չորս կողմերին միաժամանակ։
երկու արժեքի դեպքում – առաջին արժեքը կպատկանի վերևի ու ներքևի կողմերին, երկրորդ արժեքը՝ ձախ և աջ կողմերին։
երրեք արժեքի դեպքում – առաջին արժեքը կպատկանի վերևի կողմին, երկրորդը ձախ և աջ կողմերին, երրորդը ներքևի կողմին։
չորս արժեքի դեպքում – հերթականությամբ բոլոր 4 կողմերի համար՝ վերևի, աջակողմյան, ներքևի և ձախակողմյան։
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image-source: url(ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8% ;
border-image-width: 1 1 1 1;
border-image-repeat: round round;
}
border-image-width:
border-image-width: – սահմանում է border նկարի լայնությունը։ Արժեքը կարող է նշվել պիքսելով կամ այլ չափման միավորով, կամ առանց դրա։
Օրինակ, եթե նշվի 1՝ border նկարի լայնությունը հավասար կլինի border-width-ի լայնությանը․ օրինակում այն հավասար է 50px-ի։ 2-ի դեպքում՝ 50×2=100px-ի և այլն։
4 արժեքները կարող են տարբեր կերպ սահմանվել՝
մեկ արժեքի դեպքում –արժեքը կպատկանի չորս կողմերին միաժամանակ։
երկու արժեքի դեպքում – առաջին արժեքը կպատկանի վերևի ու ներքևի կողմերին, երկրորդ արժեքը՝ ձախ և աջ կողմերին։
երրեք արժեքի դեպքում – առաջին արժեքը կպատկանի վերևի կողմին, երկրորդը՝ ձախ և աջ կողմերին, երրորդը՝ ներքևի կողմին։
չորս արժեքի դեպքում – հերթականությամբ բոլոր 4 կողմերի համար՝ վերևի, աջակողմյան, ներքևի և ձախակողմյան։
Նայենք օրինակներին՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: solid black;
border-image-source: url(verjnakan-ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8%;
border-width: 50px;
border-image-width: 1 2 3 4;
border-image-repeat: round round;
}
Մեկ այլ տարբերակ՝
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: solid black;
border-image-source: url(verjnakan-ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8%;
border-width: 50px;
border-image-width: 50px 37.5px 25px 12.5px;
border-image-repeat: round round;
}
border-image-width-ին հնարավոր է սահմանել « auto » հատուկ բառը, որով կողմերը կլայնանան այնքան, որքան որոշվել է border-image-slice-ի ժամանակ, այսինքն՝ 62px բոլոր 4 կողմերի համար։
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image-source: url(verjnakan-ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8%;
border-image-width: auto;
border-image-repeat: round round;
}
border-image-outset:
border նկարը հնարավոր է իր հիմնական տեղից դուրս հանել որքան անհրաժեշտ է։
Ստանդարտ տեսքը՝
.div01 {
margin: 80px 70px;
width: 400px;
height: 400px;
background: grey;
border: 50px solid black;
border-image-source: url(raamka-02.png);
border-image-slice: 25%;
border-image-width: auto;
border-image-repeat: round round;
}
Փոփոխված տեսքով՝
.div01 {
margin: 80px 70px;
width: 400px;
height: 400px;
background: grey;
border: 50px solid black;
border-image-source: url(raamka-02.png);
border-image-slice: 25%;
border-image-width: auto;
border-image-repeat: round round;
border-image-outset: 30px;
}
border-image-repeat:
border-image-repeat: – վերաբերում է՝ stretch, repeat, round, space արժեքներին։ Տես՝ border-image -ը։
Հնարավոր է երկու արժեք սահմանել՝ առաջինը կվերաբերի հորիզոնական կողմերին, երկրորդը՝ ուղղահայաց։
.div01 {
margin: 10px 1px;
width: 400px;
height: 400px;
border: 50px solid black;
border-image-source: url(verjnakan-ramka.png);
border-image-slice: 18.8% 18.8% 18.8% 18.8%;
border-image-width: 1 1 1 1;
border-image-repeat: stretch round;
}
border-collapse
border-collapse – օգտագործվում է աղյուսակում(table) և սահմանում է՝ աղյուսակի արկղների կողմերը ընդհանուր պետք է լինեն, թե ամեն արկղ կունենա իր սեփականը։
Հակիիճ տվյալներ՝
Նախասահմանված արժեքը | separate |
Ժառանգվում են | Այո |
Կիրառվում են | table և inline-table պարամետրերի համար։ |
Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներնե են՝
collapse – արկղներն ունեն ընդհանուր կողմեր։
separate – ամեն արկղն ունի իր սեփական կողմերը։
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: dashed 5px;
border-spacing: 3px 3px;
}
table th,
table td {
border: solid 3px;
}
hayti
border-collapse: separate
Երկիր
Մայրաքաղաք
Հայաստան
Երևան
Ռուսաստան
Մոսկվա
Ամերիկա
Վաշինգտոն
Կանադա
Օտտավա
Ֆրանսիա
Փարիզ
border-collapse: collapse
Երկիր
Մայրաքաղաք
Հայաստան
Երևան
Ռուսաստան
Մոսկվա
Ամերիկա
Վաշինգտոն
Կանադա
Օտտավա
Ֆրանսիա
Փարիզ
Հաշվի առնել, որ եթե border-collapse-ը հավասար է collapse-ի և սահմանագծի ոճը « inset » է, ապա ոճը ավելի շատ նման կլինի « groove » ոճին, եթե « outset » է` « ridge » ոճին։
Եթե border-collapse-ը հավասար է separate-ի, այսինքն արկղերն առանձնացված են իրարից, ապա border-spacing-ի միջոցով հեռավորություն է սահմանվում արկղերի միջև։
border-spacing
border-spacing – Եթե border-collapse-ը հավասար է separate-ի, այսինքն արկղերն առանձնացված են իրարից, ապա border-spacing-ի միջոցով հեռավորություն է սահմանվում արկղերի միջև։
Հակիճ տվյալներ՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Այո |
Կիրառվում են | table և inline-table պարամետրերի համար։ |
Ենթարկվում է անիմացիայի | Ոչ |
Այս հատկությունը կարող է ընդունել երկու արժեք։
Եթե նշված է միայն մեկը՝ հեռավորություն երկու ուղղությամբ էլ՝ հորիզոնական և ուղղահայաց։
Եթե նշված է երկուսը՝ առաջինը կվերաբերի հորիզոնական ուղղությանը, երկրորդը՝ ուղղահայաց։
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: solid 5px rgb(255, 51, 51);
border-spacing: 10px 10px;
}
table th,
table td {
border: solid 3px rgb(255, 153, 51);
}
hayti
border-collapse: separate
Երկիր
Մայրաքաղաք
Հայաստան
Երևան
Ռուսաստան
Մոսկվա
Ամերիկա
Վաշինգտոն
Կանադա
Օտտավա
Ֆրանսիա
Փարիզ
outline outline-color outline-style outline-width
outline -ն ունիվերսալ հատկություն է, որում սահմանվում է outline-color, outline-style, outline-width-ի արժեքները(ՏԵս՝ outline-offset)։
outline-ը սահմանում է արտաքին սահմանագծի(արտաքին border-ի) գույնը, ոճը, լայնությունը։
outline-offset -ի միջոցով նշվում է հեռավորությունը էլեմենտի հիմնական border-ից։
outline-նն ունի մի քանի տարբերություններ border -ից՝
-այն հիմնական էլեմենտի դիրքի և չափերի վրա չի ազդում։
-այն տարածք չի զբաղեցնում, այսինքն իրեն շրջապատող էլեմենտների վրա չի ազդում և ցուցադրվում է դրանց վերևում։
-այն, ինչպես նաև սրան վերաբերող երեք հատկությունները, չեն կարող էլեմենտի առանձին կողմերին տարբեր արժեքներ սահմանել․ արժեքները ընդունվում են միանգամից չորս կողմերի համար։
Հակիրճ տվյալները՝
Նախասահմանված արժեքը | չունի |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա: |
Ենթարկվում է անիմացիայի | Այո |
outline-offset
outline-offset – արտաքին border-ի՝ outline-ի համար սահմանում է հեռավորություն հիմնական border-ից։
Բացասական արժեքի դեպքում border-ը ցուցադրվում է էլեմենտի ներսում, իսկ դրականը էլեմենտից հեռացնում է։
Հակիրճ տվյալները՝
Նախասահմանված արժեքը | 0 |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների վրա: |
Ենթարկվում է անիմացիայի | Այո |
outline-ի համար ընդհանուր օրինակ՝
img {
margin: 80px 70px;
background: orange;
border: 10px solid black;
outline-color: red;
outline-style: double;
outline-width: 25px;
outline-offset: 30px;
}