TechCodeview

The siena yra CSS santrumpos ypatybė, kuri naudojama elemento kraštinei pridėti. Tai leidžia mums nurodyti dėžutės kraštą. Jis nustato kraštinės plotį, stilių ir spalvą. Ši CSS nuosavybė apima šias kraštinės ypatybes:

kraštinės plotis:Ypatybė border-width naudojama kraštinės pločiui nustatyti. Taip pat galime naudoti iš anksto nustatytas reikšmes plonas, vidutinis, ir storas nustatyti kraštinės plotį. Jis nustato krašto storį. Jo numatytoji reikšmė yra vidutinis .
Šis turtas negali būti naudojamas vienas. Jis visada naudojamas su kitomis kraštinės ypatybėmis, pvz., „border-style“ savybe, kad pirmiausia būtų nustatyta siena; kitaip jis neveiks.
Kraštinės plotis gali būti skirtingas kiekvienoje pusėje. Tai galima padaryti naudojant kraštinės-apačios-pločio, kraštinė-viršus-plotis, kraštinė-dešinė-plotis , ir kraštinė-kairė-plotis .kraštinės stilius:Ši savybė nurodo kraštinės stilių. Ji apibrėžia, ar kraštinė yra vientisa, punktyrinė, brūkšninė, dviguba, griovelis ir viena iš kitų galimų reikšmių. Nenustačius šios savybės, t. y. nenustačius kraštinės stiliaus, jokia kita kraštinės ypatybė neveiks. Kraštelis bus nematomas nenurodant ribinio stiliaus . Taip yra todėl, kad numatytoji šios CSS nuosavybės vertė yra nė vienas .
Panašus į kraštinės plotis , kiekvienos atskiros pusės kraštinės stilius gali būti skirtingas. Tai galima padaryti naudojant savybes kraštinės-apačios-stilius, kraštinės-viršus-stilius, kraštinės-dešinės stilius , ir kraštinė-kairė-stilius .kraštinės spalva:Tai leidžia mums pakeisti kraštinės spalvą. Spalvą galime nustatyti naudodami spalvos pavadinimą, RGB reikšmę arba šešioliktainę reikšmę. Panašus į kraštinės plotis ir ribinio stiliaus , galime individualiai keisti kraštinės spalvą, t.y. galime keisti elemento apačios, viršutinės, kairės ir dešinės kraštinės spalvą. Tai galima padaryti naudojant savybes kraštinė-apačios-spalva, kraštinė-viršus-spalva, kraštinė-dešinė spalva , ir kraštinė-kairė-spalva .
The kraštinė-spalva turtas negali būti naudojamas vienas. Jis turi būti naudojamas su kitomis kraštinės ypatybėmis, pvz., „border-style“ savybe, kad būtų nustatyta siena; kitaip jis neveiks.

siena prieš kontūrą

Nors kraštinės ir kontūrai yra labai panašūs, yra keletas skirtumų tarp kontūrų ir kraštinių, kurie yra tokie:

• Naudodami kontūrą negalime taikyti skirtingo kontūro pločio, stiliaus ir spalvos keturioms elemento kraštinėms, o kraštinėje galime pritaikyti pateiktą reikšmę visoms keturioms elemento pusėms.
• Kraštinė yra elemento matmens dalis, o kontūras nėra elemento matmens dalis. Tai reiškia, kad nesvarbu, kokio storio kontūrą pritaikysime elementui, jo matmenys nepasikeis.

Pažiūrėkime pavyzdį, kad suprastume pasienio savybę.

Pavyzdys

 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> 

Išvestis

Dabar yra dar vienas pavyzdys, kuriame naudojame abu kontūras ir siena savybių.

Pavyzdys

 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. 

Išvestis