TechCodeview

The robeža ir saīsinājuma rekvizīts CSS, ko izmanto, lai elementam pievienotu apmali. Tas ļauj mums norādīt lodziņa apmali. Tas nosaka apmales platumu, stilu un krāsu. Šis CSS rekvizīts ietver šādus apmales rekvizītus:

apmales platums:Rekvizīts border-width tiek izmantots, lai iestatītu apmales platumu. Mēs varam izmantot arī iepriekš definētās vērtības tievs, vidējs, un biezs lai iestatītu apmales platumu. Tas nosaka apmales biezumu. Tā noklusējuma vērtība ir vidējs .
Šo īpašumu nevar izmantot atsevišķi. To vienmēr izmanto kopā ar citiem apmales rekvizītiem, piemēram, 'border-style' rekvizītu, lai vispirms iestatītu robežu; pretējā gadījumā tas nedarbosies.
Apmales platums katrā atsevišķā pusē var būt atšķirīgs. To var izdarīt, izmantojot apmales apakšas platums, apmale-augšējā-platums, apmale-labais-platums , un robeža-kreisais-platums .apmales stils:Šis rekvizīts norāda apmales stilu. Tas nosaka, vai apmale ir viengabala, punktēta, punktēta, dubultā, rieva un viena no citām iespējamām vērtībām. Neiestatot šo rekvizītu, t.i., bez apmales stila iestatīšanas, neviens no pārējiem apmales rekvizītiem nedarbosies. Robeža būs neredzama, nenorādot apmales stilā . Tas ir tāpēc, ka šī CSS rekvizīta noklusējuma vērtība ir neviens .
Līdzīgs apmales platums , apmales stils katrai atsevišķai pusei var būt atšķirīgs. To var izdarīt, izmantojot īpašības apmales-bottom-style, border-top-style, border-bottom-style , un apmale-kreisais stils .apmales krāsa:Tas ļauj mums mainīt apmales krāsu. Mēs varam iestatīt krāsu, izmantojot krāsas nosaukumu, RGB vērtību vai hex vērtību. Līdzīgi kā apmales platums un apmales stilā , mēs varam mainīt apmales krāsu atsevišķi, t.i., mēs varam mainīt elementa apmales apakšējās, augšējās, kreisās un labās puses krāsu. To var izdarīt, izmantojot īpašības apmale-apakšā-krāsa, apmale-augšējā krāsa, apmale-labā krāsa , un robeža-kreisā krāsa .
The apmales krāsa īpašumu nevar izmantot atsevišķi. Tas ir jāizmanto kopā ar citiem apmales rekvizītiem, piemēram, 'border-style' rekvizītu, lai iestatītu apmali; pretējā gadījumā tas nedarbosies.

robeža pret kontūru

Lai gan apmales un kontūras ir ļoti līdzīgas, pastāv dažas atšķirības starp kontūrām un apmalēm, kas ir šādas:

• Izmantojot kontūru, mēs nevaram piemērot atšķirīgu kontūras platumu, stilu un krāsu elementa četrām pusēm, savukārt apmalē mēs varam piemērot norādīto vērtību visām četrām elementa malām.
• Apmale ir elementa dimensijas daļa, savukārt kontūra nav elementa dimensijas daļa. Tas nozīmē, ka nav nozīmes tam, cik biezas kontūras uzliksim elementam, tā izmēri nemainīsies.

Apskatīsim piemēru, lai saprastu robežas īpašumu.

Piemērs

 p{ border: 4px blue; font-size: 20px; color: red; text-align: center; } p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} <p>No border.</p> <p>A dotted border.</p> <p>A dashed border.</p> <p>A solid border.</p> <p>A double border.</p> <p>A groove border.</p> <p>A ridge border.</p> <p>An inset border.</p> <p>An outset border.</p> <p>A hidden border.</p> 

Izvade

Tagad ir vēl viens piemērs, kurā mēs izmantojam abus kontūru un robeža īpašības.

Piemērs

 div { border: 3px solid red; outline: 3px solid blue; border-radius: 12px; font-size: 20px; font-weight: bold; margin: 30px; padding: 30px; outline-offset: 0.5em; } <h3> Welcome to the javaTpoint.com </h3> In this div element, we are using both outline and border properties. The outline is represented by blue color and border is by red color. 

Izvade