CSS Hoek

CSS Hoek

Door CSS border-radius Eigenschappen kunnen het "rondomhoek"-stijl 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!

Hier zijn er drie voorbeelden:

1. Ronde hoeken van elementen met gespecificeerde achtergrondkleur:

Ronde hoeken!

2. Ronde hoeken van elementen met rand:

Ronde hoeken!

3. Ronde hoeken van elementen met achtergrondafbeelding:

Ronde hoeken!

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

Tip:border-radius De eigenschap is eigenlijk een verkorte versie 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: linksonderhoek, rechterbovenhoek, rechteronderhoek, linksonderhoek）：

Drie waarden - border-radius: 15px 50px 30px;（De eerste waarde wordt gebruikt voor de linksonderhoek, de tweede waarde wordt gebruikt voor de rechterboven- en linksonderhoek, de derde voor de rechteronderhoek）：

Twee waarden - border-radius: 15px 50px;（De eerste waarde wordt gebruikt voor de linksonder- en rechterbovenhoek, de tweede waarde wordt gebruikt voor de rechteronder- en linksonderhoek）：

Een waarde - border-radius: 15px;（Deze waarde wordt gebruikt voor alle vier de hoeken, de ronde hoeken 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

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

CSS ronde hoeken eigenschap

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 linker bovenhoek rand.
border-top-right-radius Definieer de vorm van de rechter bovenhoek rand.
border-bottom-right-radius Definieer de vorm van de rechter benedenhoek rand.
border-bottom-left-radius Definieer de vorm van de linker benedenhoek rand.