Γωνίες CSS

Γωνίες CSS

μέσω CSS border-radius Η ιδιότητα μπορεί να επιτρέψει οποιοδήποτε στοιχείο να έχει στυλ "γωνιακή γωνία".

Χαρακτηριστικό border-radius CSS

CSS border-radius Το attribute καθορίζει το ράδιο της γωνίας του στοιχείου.

Συμβουλή:Μπορείτε να χρησιμοποιήσετε αυτό το attribute για να προσθέσετε γωνίες στο στοιχείο!

Υπάρχουν τρία παραδείγματα:

1. Γωνίες με καθορισμένο χρώμα φόντου:

Γωνίες!

2. Γωνίες με πλαίσιο:

Γωνίες!

3. Γωνίες με εικόνα φόντου:

Γωνίες!

Αυτό είναι το κώδικας:

Παράδειγμα

#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; 
}

Προσπαθήστε το μόνοι σας

Συμβουλή:border-radius Το attribute είναι η σύντομη μορφή των παρακάτω attribute:

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

CSS border-radius - καθορίζει κάθε γωνία

border-radius Το attribute μπορεί να αποδεχτεί μια έως τέσσερις τιμές. Οι κανόνες είναι οι εξής:

Τέσσερις τιμές - border-radius: 15px 50px 30px 5px;（Χρησιμοποιούνται αντίστοιχα για: το αριστερό επάνω γωνία, το δεξί επάνω γωνία, το δεξί κάτω γωνία, το αριστερό κάτω γωνία):

Τρεις τιμές - border-radius: 15px 50px 30px;（Η πρώτη τιμή χρησιμοποιείται για το αριστερό επάνω γωνία, η δεύτερη για το δεξί επάνω και το αριστερό κάτω γωνία, η τρίτη για το δεξί κάτω γωνία):

Δύο τιμές - border-radius: 15px 50px;（Η πρώτη τιμή χρησιμοποιείται για το αριστερό επάνω και το κάτω δεξί γωνία, η δεύτερη για το δεξί επάνω και το αριστερό κάτω γωνία):

Μια τιμή - border-radius: 15px;（Αυτό το όρισμα χρησιμοποιείται για τους τεσσάρους γωνίες, οι γωνίες είναι ίδιες):

Αυτό είναι το κώδικας:

Παράδειγμα

#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; 
}

Προσπαθήστε το μόνοι σας

Μπορείτε επίσης να δημιουργήσετε γωνίες ελλειψοειδούς:

Παράδειγμα

#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;
}

Προσπαθήστε το μόνοι σας

Ατρύπες γωνίας CSS

Ατрибούτο Περιγραφή
border-radius Χρησιμοποιείται για να ρυθμίσει την κωδικοποίηση των τεσσάρων attribute border-*-*-radius.
border-top-left-radius Ορίζει τη μορφή του πάνω αριστερού κόμβου του κουτιού.
border-top-right-radius Ορίζει τη μορφή του κάτω αριστερού κόμβου του κουτιού.
border-bottom-right-radius Ορίζει τη μορφή του κάτω δεξιού κόμβου του κουτιού.
border-bottom-left-radius Ορίζει τη μορφή του κύριου κόμβου του κουτιού.