CSS Hoek

CSS Hoek

door CSS border-radius Eigenschappen kunnen het 'ronding' van elk element realiseren.

CSS border-radius Eigenschap

CSS border-radius De eigenschap definieert de straal van de hoeken van het element.

Tip:U kunt deze eigenschap gebruiken om een element ronde hoeken toe te voegen!

Er zijn hier drie voorbeelden:

1. Hoekronden van elementen met gespecificeerde achtergrondkleur:

Hoekronden!

2. Hoekronden van elementen met rand:

Hoekronden!

3. Hoekronden van elementen met achtergrondafbeelding:

Hoekronden!

Dit is de code:

Voorbeeld

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Probeer het zelf uit

Tip:border-radius De eigenschap is eigenlijk een verkorte vorm van de volgende eigenschappen:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - specificeer elke hoek

border-radius De eigenschap kan één tot vier waarden accepteren. De regels zijn als volgt:

Vier waarden - border-radius: 15px 50px 30px 5px;（Volgens volgorde respectievelijk gebruikt voor：linkerbovenhoek、rechterbovenhoek、rechteronderhoek、linkeronderhoek）：

Drie waarden - border-radius: 15px 50px 30px;（De eerste waarde wordt gebruikt voor de linkerbovenhoek，de tweede waarde wordt gebruikt voor de rechterbovenhoek en de linkeronderhoek，de derde voor de rechteronderhoek）：

Twee waarden - border-radius: 15px 50px;（De eerste waarde wordt gebruikt voor de linkerbovenhoek en de rechteronderhoek，de tweede waarde wordt gebruikt voor de rechterbovenhoek en de linkeronderhoek）：

Een waarde - border-radius: 15px;（Deze waarde wordt gebruikt voor alle vier de hoeken, de hoekronden zijn allemaal hetzelfde）：

Dit is de code:

Voorbeeld

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Probeer het zelf uit

U kunt ook ovale hoeken maken:

Voorbeeld

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Probeer het zelf uit

CSS hoekrondheidseigenschap

Eigenschap Beschrijving
border-radius Gebruikt om de verkorte eigenschap voor alle vier de border-*-*-radius-eigenschappen in te stellen.
border-top-left-radius Definieer de vorm van de linkerkantbovenrand.
border-top-right-radius Definieer de vorm van de rechterkantbovenrand.
border-bottom-right-radius Definieer de vorm van de rechterkantbodemrand.
border-bottom-left-radius Definieer de vorm van de linkerkantbodemrand.