Krawędzie ramki CSS

CSS krawędzie - oddzielne krawędzie

Z przykładów z poprzedniego rozdziału widziałeś, że można przypisać różne krawędzie każdej stronie.

W CSS istnieją również atrybuty, które można użyć do określenia każdej krawędzi (górnej, prawej, dolnej i lewej):

Przykład

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Wynik:

Różne style podkreśleń

Spróbuj sam

Różne style podkreśleń

Wynik z przykładu powyżej jest taki sam:

Przykład

p {
  border-style: dotted solid;
}

Spróbuj sam

Jego sposób działania wygląda tak:

Jeśli border-style Ustawienia atrybutów obejmują cztery wartości:

border-style: dotted solid double dashed;

  • Podkreślenie górne jest przerywane
  • Podkreślenie prawe jest pełne
  • Podkreślenie dolne jest podwójne
  • Podkreślenie lewe jest przerywane

Jeśli border-style Ustawienia atrybutów obejmują trzy wartości:

border-style: dotted solid double;

  • Podkreślenie górne jest przerywane
  • prawy i lewy ramka są liniowe
  • Podkreślenie dolne jest podwójne

Jeśli border-style Ustawienie właściwości dwoma wartościami:

border-style: dotted solid;

  • górna i dolna ramka są kreskowana
  • prawy i lewy ramka są liniowe

Jeśli border-style Ustawienie właściwości jedną wartością:

border-style: dotted;

  • Cztery boki są kreskami

Przykład

/* Cztery wartości */
p {
  border-style: dotted solid double dashed; 
}
/* Trzy wartości */
p {
  border-style: dotted solid double; 
}
/* Dwie wartości */
p {
  border-style: dotted solid; 
}
/* Jedna wartość */
p {
  border-style: dotted; 
}

Spróbuj sam

w poprzednim przykładzie użyto border-style właściwość. Ale border-width i border-color Również się stosuje.