Video: Ruby On Rails, by Gabriel Guimaraes 2024
I stedet for å bruke opptil fire separate bilder for å gi illusjonen av en buet form på nettstedet ditt, kan du med CSS3 nå lage containere med buede hjørner! Her er koden, som har den fullt støttede CSS3-deklarasjonen øverst etterfulgt av prefikserte duplikater for andre nettlesere:
#box {border-radius: 20px; / * for Mozilla Firefox * / -moz-grense-radius: 20px; / * for Safari og Google Chrome * / -webkit-grense-radius: 20px;}
Du kan bruke rammens radiusstil på et hvilket som helst objekt, inkludert rektangulære bilder. Jo større antall piksler, runden kanten.
Før CSS3, hvis du vil ha flere kolonner på siden din, må du enten flyte elementer i beholdere eller plassere dem helt i forhold til en foreldrebeholder. Nå, med CSS3, kan du enkelt opprette flere kolonner i en enkelt beholder ved hjelp av kolonneegenskapen ved å angi verdiene for kolonne nummer og gapbredde, enten med eller uten en vertikal regel mellom dem.
# box1 {/ * for nettlesere som ikke krever et prefiks * / kolonne-telling: 4; kolonneavstand: 30px; kolonne-regel: 3px solid #fff; / * for Mozilla Firefox * / -moz-kolonne-telling: 4; -moz-kolonne-gapet: 30px; -moz-kolonne-regel: 3px solid #fff; / * for Safari og Google Chrome * / -webkit-kolonne-telling: 4; -webkit-kolonne-gapet: 30px; -webkit-kolonne-regel: 3px solid #fff;}
Illustrasjonen viser en sammenligning av ett lag ved hjelp av multikolonnestilen og et annet layout uten kolonner. Hvis du vil ha mer informasjon om hvordan du kan kontrollere utseendet til flere kolonner, kan du se Quirksmode.
