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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
<style></style>
</head>
<body>
<div class="div01">
<p>
كما ترون في العرض التوضيحي التالي، عندما يتم تبديل اتجاه النص من اليسار
إلى اليمين إلى اليمين إلى اليسار،
</p>
</div>
<div class="div02">
<p>
كما ترون في العرض التوضيحي التالي، عندما يتم تبديل اتجاه النص من اليسار
إلى اليمين إلى اليمين إلى اليسار،
</p>
</div>
</body>
</html>
Առաջին օրինակում սահմանված է “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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
<style></style>
</head>
<body>
<div class="div01"></div>
</body>
</html>
Արդյունքը՝
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="div01">
<div class="div02">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis
malesuada mi, ac sagittis……………...
</div>
</div>
</body>
</html>
Նկարի փոխարեն հնարավոր է 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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table class="separate">
<caption>
<code>border-collapse: separate</code>
</caption>
<tbody>
<tr>
<th>Երկիր</th>
<th>Մայրաքաղաք</th>
</tr>
<tr>
<td class="fx">Հայաստան</td>
<td class="gk">Երևան</td>
</tr>
<tr>
<td class="ed">Ռուսաստան</td>
<td class="tr">Մոսկվա</td>
</tr>
<tr>
<td class="sa">Ամերիկա</td>
<td class="wk">Վաշինգտոն</td>
</tr>
<tr>
<td class="ch">Կանադա</td>
<td class="bk">Օտտավա</td>
</tr>
<tr>
<td class="op">Ֆրանսիա</td>
<td class="bk">Փարիզ</td>
</tr>
</tbody>
</table>
<table class="collapse">
<caption>
<code>border-collapse: collapse</code>
</caption>
<tbody>
<tr>
<th>Երկիր</th>
<th>Մայրաքաղաք</th>
</tr>
<tr>
<td class="fx">Հայաստան</td>
<td class="gk">Երևան</td>
</tr>
<tr>
<td class="ed">Ռուսաստան</td>
<td class="tr">Մոսկվա</td>
</tr>
<tr>
<td class="sa">Ամերիկա</td>
<td class="wk">Վաշինգտոն</td>
</tr>
<tr>
<td class="ch">Կանադա</td>
<td class="bk">Օտտավա</td>
</tr>
<tr>
<td class="op">Ֆրանսիա</td>
<td class="bk">Փարիզ</td>
</tr>
</tbody>
</table>
</body>
</html>
Հաշվի առնել, որ եթե 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);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table class="separate">
<caption>
<code>border-collapse: separate</code>
</caption>
<tbody>
<tr>
<th>Երկիր</th>
<th>Մայրաքաղաք</th>
</tr>
<tr>
<td class="fx">Հայաստան</td>
<td class="gk">Երևան</td>
</tr>
<tr>
<td class="ed">Ռուսաստան</td>
<td class="tr">Մոսկվա</td>
</tr>
<tr>
<td class="sa">Ամերիկա</td>
<td class="wk">Վաշինգտոն</td>
</tr>
<tr>
<td class="ch">Կանադա</td>
<td class="bk">Օտտավա</td>
</tr>
<tr>
<td class="op">Ֆրանսիա</td>
<td class="bk">Փարիզ</td>
</tr>
</tbody>
</table>
</body>
</html>
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;
}
Armenian 
Russian