Proprietăți CSS Schiță
O schiță este o linie trasată în jurul unui element - în afara graniței. Acest lucru poate fi folosi pentru a face un element "stand out" în "stand out" .
CSS - outline proprietăți specifica stilul, culoarea și lățimea unui contur.
Acest element are un chenar negru subțire și un contur dublu, care este 10px largă și verde.
CSS Outline
O outline este o linie care este desenat în jurul elementelor (outside the borders) în "stand out" (outside the borders) pentru a face elementul "stand out" în "stand out" .
Cu toate acestea, outline proprietatea este diferită de proprietate de frontieră - pentru outline NU este o parte a dimensiunilor unui element; lățimea totală a elementului și înălțimea nu este afectată de lățimea conturului.
Outline Stil
outline-style proprietate specifică stilul de contur.
outline-style proprietate poate avea una dintre următoarele valori:
-
dotted- Definește o schiță punctată -
dashed- Definește o schiță punctată -
solid- Definește un contur solid -
double- Definește un contur dublu -
groove- Definește un contur canelat 3D. Efectul depinde de valoarea contur culoare -
ridge- Definește un contur crestata 3D. Efectul depinde de valoarea contur culoare -
inset- Definește un contur 3D insertie. Efectul depinde de valoarea contur culoare -
outset- Definește un contur 3D început. Efectul depinde de valoarea contur culoare -
none- Definește nici un contur -
hidden- Definește un contur ascuns
Următorul exemplu stabilește mai întâi un chenar negru subțire în jurul fiecărui <p> Element, atunci arată diferitele outline-style valori:
Exemplu
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}Rezultat:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Încearcă - l singur » Note: Nici una dintre celelalte proprietăți CSS contur descrise mai jos vor avea nici un efect cu excepția cazului în outline-style proprietatea este setată!
Contur de culoare
outline-color proprietate este folosit pentru a seta culoarea conturului.
Culoarea poate fi setat prin:
- nume - specificați un nume de culoare, cum ar fi "red"
- RGB - specificați o valoare RGB, cum ar fi " rgb(255,0,0) "
- Hex - specificați o valoare hex, cum ar fi "#ff0000"
- invert - efectuează o inversare de culoare (which ensures that the outline is visible, regardless of color background) de (which ensures that the outline is visible, regardless of color background)
Exemplu
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}Rezultat:
A colored outline.
Schiță Lățime
outline-width proprietate specifică lățimea conturului.
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.
Exemplu
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Rezultat:
A thick outline.
A thinner outline.
Outline - proprietate de stenografie
Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile individuale de contur într-o singură proprietate.
outline proprietate este o proprietate prescurtare pentru următoarele proprietăți contur individuale:
-
outline-width -
outline-style(required) -
outline-color
Exemplu
p {
border: 1px solid black;
outline: 5px dotted red;
}Rezultat:
An outline.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 »
Toate proprietățile CSS Schiță
| Proprietate | Descriere |
|---|---|
| outline | Setează toate proprietățile contur într-o singură declarație |
| outline-color | Setează culoarea o schiță |
| outline-offset | Specifică spațiul dintre un contur și marginea sau a unui element de frontieră |
| outline-style | Setează stilul unui contur |
| outline-width | Setează lățimea unui contur |