Hvordan lage et bilde til å erstatte en Border i CSS

Hvordan lage et bilde til å erstatte en Border i CSS


Cascading Style Sheets (CSS) er et stilark språk webutviklere bruke til å endre utseendet på dokumenter skrevet i et kodespråk som HTML eller XML. Dette alternativet gir Webdesignere stor fleksibilitet fordi de kan erstatte alle bilde grenser på sine nettsider med et enkelt CSS regelen snarere enn å oppdatere hver enkelt HTML-fil. Den "border-image" CSS-kode som gjør det mulig å bruke et bilde i stedet for linje grenser. Du kan også angi et annet bilde for hver av de grense fire sider.

Bruksanvisning

1 Åpne FTP-program. Naviger til bildekatalogen. Last opp bildet eller bildene som vil fungere som din grense.

2 Åpne din CSS fil i Web utvikling-programmet.

3 Skriv inn følgende kode inn i CSS-filen, erstatter hvert element i henhold til dine egne preferanser:

kant: 50 piksler dobbel orange;

border-image: URL ( "border-image.png") 25 30 10 20 repeat;

Den "50 piksler" i den første linjen angir bredden av grensen for nettlesere som ikke forstår "border-image" kode. "Double orange" er også en fallback, angir en dobbel oransje linje skal vises i stedet for grensen bildet.

Den "URL" angir plasseringen på serveren der grensen bildet ligger. De fire tall representerer enten antallet bildeelementer (som i det ovennevnte eksempel) eller i prosent (som indikert ved en "%" tegn etter hvert nummer) for hver bildes side som vil bli brukt til å utgjøre grensen, med start fra toppen, høyre, nederst, venstre.

Hjørne deler av bildet vil alltid bli satt i tilsvarende plass i bildekanten. Regelen ved slutten av koden ( «repeat" i dette eksempel) forteller leseren hva som bør gjøres i de midtre deler av grensen. "Repeat" fliser på bildet; "Strekke", strekker bildet; "Runde" fliser bildet slik at en runde antall brikker passe, ellers skalere bildet.

Hint

  • Du kan håndtere utseendet på hver side av grensen bilde separat ved å inkludere fire separate linjer med kode, en for hver av de topp, bunn, venstre og høyre side. Last opp et annet bilde for hver side, deretter endre hvilken del av hvert bilde du ønsker å vise, samt hvordan du kan vise dem.