Najlepszy samouczek CSS3 zaokrąglone narożniki W 2024 r. W tym samouczku możesz dowiedzieć się CSS3 zaokrąglone narożniki,Pomoc Browser,CSS3 Własność border-radius,Przykłady,CSS3 border-radius - określić każdy filet,Przykłady,Przykłady,CSS3 zaokrąglone narożniki własność,
Za pomocą CSS3 właściwość border-radius, można dokonać dowolnego elementu "rogu".
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.
-webkit- lub -moz- wcześniejsze dane wyrażone poparcie dla pierwszej wersji prefiksu.
属性 | |||||
---|---|---|---|---|---|
border-radius | 9.0 | 5.0 4.0 -webkit- |
4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Za pomocą CSS3 właściwość border-radius, można dokonać dowolnego elementu "rogu".
Poniższe trzy przykłady:
1. Określ kolor tła elementu zaokrąglonym:
Filet!
2. Określ elemencie granicy filet:
Filet!
3. Określ filet elementów tła obrazu:
Filet!
Kod jest w następujący sposób:
Jeśli podasz tylko jedną wartość we właściwości border-radius, a następnie wygeneruje cztery filety.
Ale jeśli chcesz określić jedenaście w czterech rogach, można stosować następujące zasady:
Poniższe trzy przykłady:
1. Cztery wartości - border-radius: 15px 50px 30px 5px:
2. Te trzy wartości - border-radius: 15px 50px 30px:
3. Te dwie wartości - border-radius: 15px 50px:
Poniżej znajduje się kod źródłowy:
Można również tworzyć eliptyczny róg:
nieruchomość | opis |
---|---|
border-radius | Wszystkie cztery narożniki granicy - * - * - właściwości promienia Akronim |
border-top-left-radius | Definiuje górny lewy róg łuku |
border-top-right-radius | Definiuje górny prawy róg radian |
border-bottom-right-radius | To definiuje łuk w prawym dolnym rogu |
border-bottom-left-radius | Definiuje dolny lewy róg łuku |