Krawędzie CSS

Atrybuty krawędzi CSS

CSS border Atrybut pozwala określić styl, szerokość i kolor krawędzi elementu.

Wszystkie moje krawędzie mają krawędzie.

Mam dolną krawędź w kolorze czerwonym.

Mam krawędzie z zaokrąglonymi rogami.

Mam lewą krawędź w kolorze niebieskim.

Styl krawędzi CSS

border-style Atrybut określa typ krawędzi do wyświetlenia.

Dozwolone są następujące wartości:

  • kropkowany - Definiowanie kropkowanej krawędzi
  • kreskowany - Definiowanie kreskowanej krawędzi
  • czysty - Definiowanie czystej krawędzi
  • podwójny - Definiowanie podwójnej krawędzi
  • wпадkowy - Definiowanie 3D wpadkowej krawędzi. Efekt zależy od wartości border-color
  • wzgórzowy - Definiowanie 3D wzgórzowej krawędzi. Efekt zależy od wartości border-color
  • wewnętrzny - Definiowanie 3D wewnętrznej krawędzi. Efekt zależy od wartości border-color
  • wyściełkowany - Definiowanie 3D wyściełkowanej krawędzi. Efekt zależy od wartości border-color
  • brak - Definiowanie braku krawędzi
  • ukryty - Definiowanie ukrytej krawędzi

border-style Atrybut może przyjąć od jednej do czterech wartości (dla górnej, prawej, dolnej i lewej krawędzi).

Przykład

Pokaz różnych stylów krawędzi:

p.kropkowany { styl-krawędzi: kropkowany;}
p.kreskowany { styl-krawędzi: kreskowany;}
p.czysty { styl-krawędzi: czysty;}
p podwójny { styl-krawędzi: podwójny;}
p.wпадkowy { styl-krawędzi: wpadkowy;}
p.wzgórzowy { styl-krawędzi: wzgórzowy;}
p.wewnętrzny { styl-krawędzi: wewnętrzny;}
p.wyściełkowany { styl-krawędzi: wyściełkowany;}
p.brak { styl-krawędzi: brak;}
p.ukryty { styl-krawędzi: ukryty;}
p.mix {border-style: punktowe przerywane jednolite podwójne;}

Wynik:

Krawędzie punktowe.

Krawędzie przerywane.

Krawędzie jednorodne.

Krawędzie dwuliniowe.

Krawędzie wklęsłe. Ich efekt zależy od wartości border-color.

Krawędzie walcowane. Ich efekt zależy od wartości border-color.

Krawędzie 3D inset. Ich efekt zależy od wartości border-color.

Krawędzie 3D outset. Ich efekt zależy od wartości border-color.

Brak krawędzi.

Ukryte krawędzie.

Zmieszane krawędzie.

Spróbuj sam

Uwaga:O ile nie ustawiono border-style Atrybuty, w przeciwnym razie inne atrybuty krawędzi CSS (które będą szczegółowo omówione w następnym rozdziale) nie będą miały żadnego wpływu!