Κοίνα CSS

Κοίνα CSS

μέσω CSS border-radius Πρότυπο, μπορεί να επιτύχει οποιοδήποτε στοιχείο να έχει στυλ 'γωνία'.

Πρότυπο CSS border-radius

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

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

Εδώ υπάρχουν τρία παραδείγματα：

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 Η ιδιότητα είναι η συντομευμένη μορφή των παρακάτω ιδιοτήτων：

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

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

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

Τέσσερις τιμές - 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 Χρησιμοποιείται για να ρυθμίσει την συντομευμένη ιδιότητα των τεσσάρων περιμετρικών ιδιοτήτων border-*-*-radius.
border-top-left-radius Ορίζει τη μορφή του γωνιακού περιγράμματος στο επάνω αριστερό μέρος.
border-top-right-radius Ορίζει τη μορφή του γωνιακού περιγράμματος στο επάνω δεξί μέρος.
border-bottom-right-radius Ορίζει τη μορφή του γωνιακού περιγράμματος στο κάτω δεξί μέρος.
border-bottom-left-radius Ορίζει τη μορφή του γωνιακού περιγράμματος στο κάτω αριστερό μέρος.