Hoe maak je een border-radius in CSS Solliciteer

Hoe maak je een border-radius in CSS Solliciteer


Voordat niveau drie van Cascading Style Sheets (CSS) kwam naar buiten en kreeg steun van browsers, afgeronde hoeken op webpagina's vereist lastige technieken met behulp van cut-up beelden. Met de toevoeging van de "border-radius" CSS3 eigenschap, kunt u nu maken afgeronde hoeken met behulp van slechts een lijn of twee van de code en geen afbeeldingen. U kunt zelfs geven elke hoek van een HTML-element een andere grens radius. De "border-radius" eigenschap werkt goed op <div> -tags, knopen, en formuliervelden. Helaas werkt het niet in oudere versies van Internet Explorer.

instructies

1 Open het HTML-bestand van uw webpagina in een code-editor zoals jEdit, Notepad ++ of BBEdit. Zoek de HTML-element waar u de straal grens toe te passen door het vinden van de bijbehorende tag. Bijvoorbeeld, de tag een paragraaf element <p>. Kijk naar de attributen in de tag en vinden ofwel een klasse naam of ID-naam. Als u geen van deze attributen te zien, voeg een als volgt:

<Div id = "idname" class = "className"> Inhoud ... </ div>

Merk op dat u kunt hergebruiken namen klasse in meerdere tags, maar u kunt alleen gebruik maken van een ID-naam voor elke tag op een webpagina.

2 Scroll naar de bovenkant van uw HTML-bestand en voeg <style> -tags tussen de <head> -tags. Stel de "type" attribuut "text / css" als u gebruik maken van HTML 4 of XHTML-code. U kunt ook toevoegen als u niet weet welke standaard van HTML u gebruikt. Als uw website maakt gebruik van een externe style sheet, voeg de CSS-code daar van harte welkom.

3 Schrijf een selector om uw HTML-element in CSS "te selecteren." Prefix class namen met periodes en prefix ID namen met hash symbolen. Selecteer op tag naam om alle tags van een specifiek type op de pagina te selecteren. Hier zijn voorbeelden van hoe je HTML-elementen kunt selecteren:

div {}

idname {}

.naam van de klasse {}

4 Stel de "border-radius" onroerend goed voor uw geselecteerde HTML-element. Hier is een voorbeeld:

idname {border-radius: 10px;}

In de bovenstaande code, wordt de HTML element afgeronde hoeken met een straal van tien pixels elk. U kunt gebruik maken van "border-top-left-radius" naar een afgeronde rand van toepassing op de linkerbovenhoek van een element, of door alleen de onderkant met behulp van "border-left-bottom-radius" samen met "border-bottom rechts-radius. "

5 Dupliceer je "border-radius" eigenschappen en voeg de "-webkit" vendor prefix voor hen. Het resultaat ziet er als volgt uit:

border-radius: 10px;

-webkit-border-radius: 10px;

Dupliceer de oorspronkelijke eigenschappen weer, maar met toevoeging van het voorvoegsel "-moz" deze tijd. Overal waar u een woning gebruikt, zoals "border-top-right-radius," verander de Mozilla-voorvoegsel woning aan iets als "-moz-border-radius-topright." Merk op dat deze code ondersteunt Firefox versie 3.x, maar Firefox 4 en omhoog enkel gebruikt "border-radius."

Hints

  • Laat niet-compatibele browsers om scherpe hoeken weer te geven. Deze praktijk staat bekend als "progressive enhancement," en het is niet de algemene prestaties en gebruiksvriendelijkheid van een website design te bewerkstelligen. Gebruik JavaScript fall-backs hoeken ronden in oudere browsers als je nog wilt de afgeronde hoeken in alle browsers.
  • Internet Explorer 8 en hieronder zijn niet compatibel met de "border-radius" eigendom.
  • Maak altijd een back-up van uw HTML en CSS-bestanden voordat ze te bewerken.