Zaokrąglone rogi CSS
Zaokrąglone rogi CSS
Za pomocą właściwości CSS border-radiusmożesz nadać dowolnemu elementowi "zaokrąglone rogi".
CSS border-radius Property
Właściwość CSS
border-radiusdefiniuje promień narożników elementu.
Wskazówka: ta właściwość pozwala dodawać zaokrąglone rogi do elementów!
Oto trzy przykłady:
1. Zaokrąglone rogi dla elementu o określonym kolorze tła:
Zaokrąglone rogi!
2. Zaokrąglone rogi dla elementu z ramką:
Zaokrąglone rogi!
3. Zaokrąglone rogi dla elementu z obrazem tła:
Zaokrąglone rogi!
Oto kod:
Przykład
#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;
}
Wskazówka: Właściwość border-radiusjest w rzeczywistości skróconą własnością dla
właściwości border-top-left-radius, border-top-right-radiusi .border-bottom-right-radiusborder-bottom-left-radius
CSS border-radius - Określ każdy narożnik
Właściwość border-radiusmoże mieć od jednej do czterech wartości. Oto zasady:
Cztery wartości - border-radius: 15px 50px 30px 5px; (pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego rogu, trzecia wartość dotyczy prawego dolnego rogu, a czwarta wartość dotyczy lewego dolnego rogu):
Trzy wartości - border-radius: 15px 50px 30px; (pierwsza wartość dotyczy lewego górnego rogu, druga wartość dotyczy prawego górnego i lewego dolnego rogu, a trzecia wartość dotyczy prawego dolnego):
Dwie wartości - border-radius: 15px 50px; (pierwsza wartość dotyczy rogów lewego górnego i prawego dolnego, a druga rogów prawego górnego i lewego dolnego):
Jedna wartość - border-radius: 15px; (wartość dotyczy wszystkich czterech rogów, które są zaokrąglone równomiernie:
Oto kod:
Przykład
#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;
}
Możesz także stworzyć eliptyczne narożniki:
Przykład
#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;
}
Właściwości zaokrąglonych narożników CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |