L'objectiu d'aquest manual és explicar com crear vores de cantonades rodones. Per a això, primer, hem de conèixer el ' frontera ' propietat. Així doncs, comencem!
Què és la propietat 'border' en CSS?
Per crear una vora al voltant d'un element, heu d'utilitzar el ' frontera ' propietat. Mitjançant aquesta propietat, podeu configurar el ' estil ”, “ color ”, i “ amplada ” de la frontera.
Sintaxi
La sintaxi de la propietat de la vora es dóna com:
frontera : color d'estil d'amplada
Aquí teniu la descripció dels valors indicats anteriorment:
- amplada: S'utilitza per establir l'amplada de la vora.
- estil: S'utilitza per definir l'estil de la vora, com ara punt, guionat, sòlid o doble.
- color: Determina el color de la vora.
Aquí teniu un exemple en què implementem el ' frontera ' propietat.
Com crear una vora amb CSS?
Per crear una vora, primer, afegiu un element en un fitxer HTML. Per fer-ho, crearem un
i
:
< cos >
< div classe = 'cantonada' >
< h1 > Suggeriment de Linux < / h1 >
< pàg > Cantonades arrodonides en CSS < / pàg >
< / div >
< / cos >
A continuació, passarem a la secció CSS.
Aquí, el ' .cantonada ” s'utilitza per accedir a la classe assignada al
.cantonada {
frontera : 4 píxels sòlid rgb ( 248 , 6 , 107 ) ;
amplada : 250 píxels ;
alçada : 150 píxels ;
color de fons : rgb ( 234 , 0 , 255 ) ;
}
Un cop hàgiu implementat el codi esmentat anteriorment, aneu al fitxer HTML i executeu-lo. Veureu el següent resultat:
Ara, passarem a la següent part, on crearem la vora quadrada a la vora de la cantonada rodona.
Com arrodonir la cantonada utilitzant CSS?
Per crear una vora de cantonada arrodonida, el ' frontera-radi S'està utilitzant la propietat, en la qual podeu establir el radi de la cantonada segons les vostres preferències.
Sintaxi
La sintaxi de la propietat border-radius es mostra a continuació:
frontera-radi : valorContinuem amb l'exemple anterior i establim el radi de la vora per aconseguir cantonades rodones.
Exemple
En ' .cantonada ” classe del fitxer CSS, establiu el valor de “ frontera-radi 'propietat com' 30 píxels ”:
frontera-radi : 30 píxels ;Amb la línia anterior afegida, obtindreu la següent sortida:
La sortida anterior significa que les vores s'han canviat correctament en cantonades rodones a causa de la propietat border-radius.
Conclusió
En CSS ' frontera-radi La propietat s'utilitza per canviar la cantonada de les vores. La forma de la corba canvia segons el valor donat de radi. Utilitzant la propietat esmentada, podeu establir el radi de la cantonada segons la vostra elecció. En aquest article, hem explicat com arrodonir les vores de les cantonades utilitzant la propietat border-radius amb l'ajuda d'un exemple.