CSS3 Colțuri rotunjite
Cu CSS3 border-radius proprietate, vă puteți da orice element "rounded corners" .
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius de proprietate
Cu CSS3, puteți da orice element "rounded corners" , folosind border-radius proprietate.
Iată trei exemple:
1. colturi rotunjite pentru un element cu o culoare de fundal specificat:
Colturi rotunjite!
2. colțuri rotunjite pentru un element cu un chenar:
Colturi rotunjite!
3. colțuri rotunjite pentru un element cu o imagine de fundal:
Colturi rotunjite!
Aici este codul:
Exemplu
#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;
} Încearcă - l singur » Tip: border-radius proprietatea este de fapt o proprietate prescurtare pentru border-top-left-radius , border-top-right-radius , border-bottom-right-radius și de border-bottom-left-radius proprietăți.
CSS3 border-radius - Precizați fiecare colț
Dacă specificați o singură valoare pentru border-radius proprietății, această rază va fi aplicat la toate cele 4 colțuri.
Cu toate acestea, puteți specifica fiecare colț separat, dacă doriți. Aici sunt regulile:
- Patru valori: prima valoare este valabilă pentru partea din stânga sus, a doua valoare se aplică din dreapta sus, a treia valoare se aplică în partea de jos-dreapta, iar valoarea patra se aplică în colțul din stânga-jos
- Trei valori: prima valoare este valabilă pentru partea din stânga sus, a doua valoare este valabilă pentru partea de sus-dreapta și din stânga jos, iar a treia valoare se aplică în partea de jos-dreapta
- Există două valori: prima valoare se aplică colțul din stânga sus și de jos-dreapta, iar a doua valoare se aplică din dreapta sus și colțul de jos-stânga
- O singură valoare: toate cele patru colțuri sunt rotunjite în mod egal
Iată trei exemple:
1. Patru valori - border-radius: 15px 50px 30px 5px :
2. trei valori - border-radius: 15px 50px 30px :
3. Există două valori - border-radius: 15px 50px :
Aici este codul:
Exemplu
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Încearcă - l singur » Ai putea crea, de asemenea, colțuri eliptice:
Exemplu
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Încearcă - l singur » Testați-te cu exerciții!
CSS3 colturi rotunjite Proprietăți
| Proprietate | Descriere |
|---|---|
| border-radius | O proprietate prescurtare pentru setarea tuturor celor patru frontiera - * - * - proprietăți de rază |
| border-top-left-radius | Definește forma marginii colțul din stânga sus |
| border-top-right-radius | Definește forma marginii colțul din dreapta sus |
| border-bottom-right-radius | Definește forma marginii colțul din dreapta jos |
| border-bottom-left-radius | Definește forma marginea colțul din stânga-jos |