Lage avrundede hjørner med CSS 3 - dummies

Hvis du opprettet en boks med avrundede hjørner ved hjelp av tidligere versjoner av CSS, bilder og HTML-tabeller, vet du hvilken smerte det var - hvordan du måtte lage fire bilder (en for hvert hjørne), og hvordan du måtte nøye justere alt slik at hjørnene lined opp akkurat slik.

Uansett om du prøvde den gamle teknikken, er du sikker på å sette pris på hvor mye enklere å lage avrundede hjørner er når du bruker CSS 3-egenskapens grense-radius.

Når du bruker rammens radius, angir du radiusens lengde som verdien for å lage de avrundede hjørner. Du kan da gjøre dine avrundede hjørner avrundet som du vil, og du kan bruke stilen til noen eller alle hjørner av en boks. Her ser du et diagram som er utformet for å hjelpe deg med å se hvordan endring av radius endrer det buede hjørnet.

Du kan bruke rammens radius til en hvilken som helst boksobjekt, for eksempel en tag eller en

tag. Her er syntaxen for å lage avrundede hjørner i CSS 3 for WebKit-nettlesere (merk at r representerer radius, avstanden fra senterets sirkel til det buede hjørnet):

-bredde for webkit-grense: r lengde;

Hvis du vil spesifisere en annen radius for hvert hjørne, kan stilen din se ut som følgende bit kode. I denne figuren ser du hvordan verdiene endres hvis det runde hjørnet bare brukes øverst til høyre og nedre venstre hjørner:

-webkit-grense-topp-venstre-radius: 0; -webkit-grense-topp-høyre-radius: 25px; -webkit-grense-bunn-høyre-radius: 0; -webkit-grense-bunn-venstre-radius: 25px;

Du kan ha enda mer kontroll over radiusen hvis du angir to verdier for radiusen, slik:

-webkit-grense-radius: 50px 100px;

I det neste eksemplet som vises, ble en skrifthøyde av avrunding lagt til boksen, slik at den forblir i skala med teksten. Ved å bruke em-enheten som vår måleenhet, kan vi holde designet i mål på både iPhone og iPad. Dette er en nyttig praksis når du vil legge runde hjørner rundt et tekstelement, for eksempel overskrift:

-webkit-grense-radius: 1em;

I eksemplet ble det også brukt en dråpeskygge og en gradient. Du kan legge til drop shadows ved hjelp av CSS 3.