Ultimele tutoriale de dezvoltare web
 

CSS Frontiere

❮ precedent Capitolul următor ❯

CSS Proprietăți de frontieră

CSS - ul de border proprietăți vă permit să specificați stilul, lățimea și culoarea frontierei unui element.

Acest element are o bordură canelură care este 15px largă și verde.

Stilul de frontieră

border-style de border-style proprietate specifică ce fel de frontieră pentru a afișa.

Următoarele valori sunt permise:

  • dotted - Definește o bordură punctată
  • dashed - Definește o bordură punctată
  • solid - Definește o bordură solid
  • double - Definește o margine dublă
  • groove - Definește o bordură 3D canelat. Efectul depinde de valoarea frontierei de culoare
  • ridge - Definește o bordură 3D striate. Efectul depinde de valoarea frontierei de culoare
  • inset - Definește o bordură 3D insertie. Efectul depinde de valoarea frontierei de culoare
  • outset - Definește o bordură 3D început. Efectul depinde de valoarea frontierei de culoare
  • none - Definește fără chenar
  • hidden - Definește o bordură ascunsă

border-style de border-style proprietate poate avea de la unu până la patru valori (pentru marginea de sus, marginea dreaptă, granița de jos, și frontiera din stânga).

Exemplu

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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Rezultat:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Încearcă - l singur »

Note: Nici una dintre celelalte proprietăți de frontieră CSS descrise mai jos vor avea nici un efect cu excepția cazului în border-style proprietatea este setată!

Lățimea chenarului

border-width proprietate specifică lățimea celor patru granițe.

Lățimea poate fi setată ca mărime specifică (in px, pt, cm, em , etc) sau folosind una dintre cele trei valori predefinite: subțire, mediu sau gros.

border-width proprietate poate avea de la unu până la patru valori (pentru marginea de sus, marginea dreaptă, granița de jos, și frontiera din stânga).

Exemplu

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
Încearcă - l singur »

Culoarea chenarului

De border-color , proprietatea este utilizată pentru a seta culoarea celor patru granițe.

Culoarea poate fi setat prin:

  • name - specificați un nume de culoare, cum ar fi "red"
  • Hex - specificați o valoare hex, cum ar fi "#ff0000"
  • RGB - specificați o valoare RGB, cum ar fi " rgb(255,0,0) "
  • transparent

De border-color , proprietatea poate avea de la unu până la patru valori (pentru marginea de sus, marginea dreaptă, granița de jos, și frontiera din stânga).

În cazul în care border-color nu este setată, ea moștenește culoarea elementului.

Exemplu

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
Încearcă - l singur »

Frontieră - Fețe individuale

Din exemplele de mai sus le-ați văzut că este posibil să se specifice o margine diferită pentru fiecare parte.

În CSS, există și proprietăți pentru specificarea fiecare a frontierelor (de sus, dreapta, jos, și stânga):

Exemplu

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Încearcă - l singur »

Exemplul de mai sus dă același rezultat ca acest lucru:

Exemplu

p {
    border-style: dotted solid;
}
Încearcă - l singur »

Deci, iată cum funcționează:

În cazul în care border-style de border-style proprietate are patru valori:

  • border-style : dotted solid double dashed;
    • chenarul de sus este punctată
    • chenarul din dreapta este solid
    • de frontieră de jos este dublu
    • chenarul din stânga este punctată

În cazul în care border-style de border-style proprietate are trei valori:

  • border-style : dotted solid double;
    • chenarul de sus este punctată
    • chenarele din dreapta și stânga sunt solide
    • de frontieră de jos este dublu

În cazul în care border-style de border-style proprietate are două valori:

  • border-style : dotted solid;
    • chenarele de sus și de jos sunt punctate
    • chenarele din dreapta și stânga sunt solide

În cazul în care border-style de border-style proprietatea are o singură valoare:

  • border-style : dotted;
    • toate cele patru frontiere sunt punctate

border-style de border-style de proprietate este utilizat în exemplul de mai sus. Cu toate acestea, de asemenea , funcționează cu border-width si border-color .

Border - Proprietate stenografie

Dupa cum se poate vedea din exemplele de mai sus, există mai multe proprietăți de luat în considerare atunci când se ocupă cu frontiere.

Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile individuale de frontieră într-o singură proprietate.

border Proprietatea este o proprietate prescurtare pentru următoarele proprietăți individuale de frontieră:

  • border-width
  • border-style de border-style (required)
  • border-color

Exemplu

p {
    border: 5px solid red;
}
Încearcă - l singur »
Exemple

Mai multe exemple

Toate proprietățile de frontieră de top într - o singură declarație
Acest exemplu demonstrează o proprietate prescurtare pentru setarea tuturor proprietăților pentru marginea de sus într-o singură declarație.

Setați stilul de frontiera de jos
Acest exemplu demonstrează modul de a seta stilul de frontiera de jos.

Setați lățimea marginii din stânga
Acest exemplu demonstrează cum să setați lățimea marginii din stânga.

Setați culoarea celor patru frontierelor
Acest exemplu demonstrează modul de a seta culoarea celor patru granițe. Ea poate avea de la unu la patru culori.

Setați culoarea marginea dreaptă
Acest exemplu demonstrează modul de a seta culoarea de marginea dreaptă.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»

Toate proprietățile CSS frontieră

Proprietate Descriere
border Setează toate proprietățile de frontieră într-o singură declarație
border-bottom Setează toate proprietățile de frontieră de fund într-o singură declarație
border-bottom-color Setează culoarea frontierei de jos
border-bottom-style Setează stilul de frontiera de jos
border-bottom-width Setează lățimea marginii de jos
border-color Setează culoarea celor patru frontierelor
border-left Setează toate proprietățile de frontieră rămase într-o singură declarație
border-left-color Setează culoarea frontierei de stânga
border-left-style Setează stilul de frontiera din stânga
border-left-width Setează lățimea marginii din stânga
border-right Setează toate proprietățile chenarul din dreapta într-o singură declarație
border-right-color Setează culoarea marginea dreaptă
border-right-style Setează stilul de marginea dreaptă
border-right-width Setează lățimea marginii din dreapta
border-style Setează stilul de patru frontierelor
border-top Setează toate proprietățile de frontieră de top într-o singură declarație
border-top-color Setează culoarea marginea de sus
border-top-style Setează stilul de marginea de sus
border-top-width Setează lățimea marginii de sus
border-width Setează lățimea celor patru frontiere

❮ precedent Capitolul următor ❯