CSS kanter

CSS kantegenskaper

CSS border Egenskapen låter dig specificera elementets kantstil, bredd och färg.

Alla mina kanter har kant.

Jag har en röd nedre kant.

Jag har rundade kantstilar.

Jag har en blå vänster kant.

CSS kantstil

border-style Egenskapen specificerar vilken kanttyp som ska visas.

Tillåtna värden:

  • klickad - Definiera punkt kant
  • klickad - Definiera klickad kant
  • enhetlig - Definiera enhetlig kant
  • dubbelt - Definiera dubbel kant
  • groove - Definiera 3D skåra kant. Effekten beror på border-color värdet
  • ridge - Definiera 3D rygg kant. Effekten beror på border-color värdet
  • inre - Definiera 3D inre kant. Effekten beror på border-color värdet
  • utgång - Definiera 3D utgång kant. Effekten beror på border-color värdet
  • ingen - Definiera ingen kant
  • döljbar - Definiera dold kant

border-style Egenskapen kan sättas till ett till fyra värden (används för övre kant, högra kant, nedre kant och vänstra kant).

Exempel

Visa olika kantstilar:

p.klickad {border-style: klickad;}
p.klickad {border-style: klickad;}
p.enhetlig {border-style: enhetlig;}
p.dubbelt {border-style: dubbelt;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inre {border-style: inre;}
p.utgång {border-style: utgång;}
pingen {border-style: ingen;}
p.döljbar {border-style: döljbar;}
p.mix {border-style: punkt streckad solid dubbel;}

Resultat:

Punkt kant.

Streckad kant.

Enkel kant.

Dubbelspår kant.

Fåra kant. Effekten beror på värdet av border-color.

Terrass kant. Effekten beror på värdet av border-color.

3D inset kant. Effekten beror på värdet av border-color.

3D outset kant. Effekten beror på värdet av border-color.

Ingen kant.

Dold kant.

Blandade kantstilar.

Prova själv

Observera:Om inte satt border-style Egenskap, annars kommer andra CSS-kantegenskaper (som kommer att förklaras i nästa kapitel) inte att ha någon effekt!