Նկարների կամ տեքստի շուրջ տեղադրված շրջանակները զարդարում են կայքը և բազմազանություն հաղորդում նրա դիզայնին: Եթե դուք օգտագործում եք սեղաններ սահմաններ ստեղծելու համար, ապա յուրաքանչյուր սահմանի կոդը չափազանց շատ տեղ կզբաղեցնի: Բացի այդ, այս դեպքում դուք ստիպված կլինեք վերաշարադրել HTML կոդը յուրաքանչյուր շրջանակի համար: CSS- ի միջոցով դուք հեշտությամբ կարող եք ստեղծել ցանկալի ցանկացած հաստության և գույնի եզրագիծ ՝ մեկ անգամ գրելով պարզ կոդ բոլոր այն տարրերի համար, որոնք շրջապատված կլինեն այս եզրագծով: Այս տեխնոլոգիան անհրաժեշտության դեպքում թույլ կտա մի քանի րոպեում փոխել կայքի շրջանակների տեսակը:
Դա անհրաժեշտ է
- - ունենալ ձեր սեփական կայքը.
- - իմանալ, թե ինչ է CSS- ը և որտեղ են նշված ոճերը կայքում:
Հրահանգներ
Քայլ 1
Սահման ստեղծելու համար նախ CSS- ում գրեք հետևյալ կոդը.
ռամկա {}
Քայլ 2
Սահմանը ձեր ուզած չափը դարձնելու համար օգտագործեք եզրագծի լայնության պարամետրը, որը գծի լայնությունը սահմանում է պիքսելներով: Օրինակ, եթե շրջանակի գիծը պետք է լինի 3 պիքսել լայնության, ապա մուտքն այսպիսի տեսք կունենա.
ramka {եզրագծի լայնությունը ՝ 3 հատ;}
Քայլ 3
Այժմ սահմանեք եզրագծի ոճը `օգտագործելով սահմանային ոճի պարամետրը: Եթե ցանկանում եք ստեղծել եզրագիծ, որի կողմերը կանոնավոր պինդ գծեր են, ապա գանգուր ամրացումների միջև ծածկագրի մեջ մուտքագրեք հետևյալ գրառումը.
Քայլ 4
Կետավոր եզրագիծը կարելի է ձեռք բերել այն գրելով այսպես. Bord-style: կետավոր: Սահմանի ոճի ստուգում. Գծանշվածը ձեզ կտրում է գծավոր եզրագիծ:
Քայլ 5
Դուք կարող եք եզրագիծը դարձնել կրկնակի պինդ գիծ, ինչպիսին է `border-style: double: Օգտագործեք եզրագծի ոճ ՝ ակոս կամ սահմանի ոճ. Լեռնաշղթա ՝ տեքստը կամ պատկերները շրջանակելու մեջ 3D կողմնակի էֆեկտներով: Այս երկու տարբերակների տարբերությունն այն է, որ առաջին դեպքում շրջանակը բաղկացած է ներմուծված գծերից, իսկ երկրորդում `ուռուցիկներից:
Քայլ 6
Օգտագործեք այս կոդը ՝ border-style: inset ՝ կայքի տարրերի եզրագծով ներդիրի էֆեկտ ստեղծելու համար: Սահմանի բովանդակությունը սահմանի հետ միասին, ընդհակառակը, ուռուցիկ է, գրի՛ր սահմանի ոճ ՝ սկզբից:
Քայլ 7
Կարող եք շրջանակին ավելացնել ցանկալի գույնը `օգտագործելով եզրագիծ-գույնի պարամետրը, որը նույնպես տեղադրված է գանգուր ամրացումների միջև: Եթե ուզում եք եզրագիծը կարմիր դարձնել, ապա գրի՛ր եզրագիծ ՝ կարմիր, կապույտ - եզրագիծ ՝ կապույտ, նարնջագույն - եզրագիծ ՝ նարնջագույն:
Քայլ 8
CSS սահմանային կոդը, ներառյալ բոլոր տարբերակները, ունի այսպիսի տեսք.
ramka {սահմանի լայնությունը `3 հատ; սահմանի ոճը `պինդ; սահմանի գույնը ՝ կապույտ;}
Քայլ 9
Այժմ HTML- ում գրեք սա.
Շրջանակի պարունակություն «Շրջանակի պարունակություն» արտահայտության փոխարեն տեղադրեք ցանկալի նկարի տեքստը կամ կոդը:
Քայլ 10
Այսպիսով, կայքում կարող եք նախագծել անսահմանափակ թվով տարրեր: Շրջանակի տեսքը փոխելու համար անհրաժեշտ է փոխել միայն CSS կոդը:
