Obramowanie CSS
Obramowanie CSS — poszczególne strony
Z przykładów na poprzednich stronach widać, że możliwe jest określenie innego obramowania dla każdej strony.
W CSS istnieją również właściwości określające każdą z krawędzi (górną, prawą, dolną i lewą):
Przykład
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Wynik:
Different Border Styles
Powyższy przykład daje taki sam wynik jak ten:
Przykład
p {
border-style: dotted solid;
}
Oto jak to działa:
Jeśli border-stylewłaściwość ma cztery wartości:
- styl obramowania: kropkowana, jednolita, podwójnie przerywana;
- górna granica jest przerywana
- prawa krawędź jest pełna
- dolna granica jest podwójna
- lewa ramka jest przerywana
Jeśli border-stylewłaściwość ma trzy wartości:
- styl obramowania: kropkowana, jednolita podwójna;
- górna granica jest przerywana
- prawe i lewe obramowania są pełne
- dolna granica jest podwójna
Jeśli border-stylewłaściwość ma dwie wartości:
- styl obramowania: kropkowana jednolita;
- górna i dolna granica są przerywane
- prawe i lewe obramowania są pełne
Jeśli border-stylewłaściwość ma jedną wartość:
- styl obramowania: kropkowany;
- wszystkie cztery obramowania są kropkowane
Przykład
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Właściwość border-stylejest używana w powyższym przykładzie. Jednak działa również z
border-width
i border-color.