HTML <img>-elementin border-ominaisuus

HTML <img> -elementti

Esimerkki

Tämä HTML voi tuottaa eri paksuisia kuvan reunaviivoja:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

Kokeile itse

Määrittely ja käyttö

Tunniste <img> border ominaisuus määrittelee kuvan ympärillä olevan reunaviivan leveys, eli voit lisätä tai poistaa kuvan reunaviivan.

Huomautus:Oletusarvoisesti kuva ei ole reunaviivallinen (ellei kuva ole a elementin sisällä).

Selaimet näyttävät yleensä linkitetyn kuvan (esim. <a> elementissä olevan kuvan) kahden pikselin reunaviivan sisällä, ilmaistakseen, että lukija voi valita kuvan päästäkseen siihen liittyvään dokumenttiin.

Voit poistaa (border="0") tai laajentaa kuvan reunaviivan käyttämällä border ominaisuutta ja pikseleinä ilmaistua leveyttä.

Huomio:Ominaisuutta ei suositella käytettäväksi HTML 4 ja XHTML:ssä, vaikka se on edelleen tuettu suosituissa selaimissa.

Lue lisää: Poista kuvien reunat

Selaimen tuki

Vaikka border ominaisuutta ei suositella käytettäväksi, kaikki suosituimmat selaimet tukevat ominaisuutta.

Vinkit ja huomiot

Huomautus:HTML 4.01 ei suosittele kuvan "border" ominaisuuden käyttöä. XHTML 1.0 Strict DTD:ssä ja HTML 5:ssä ominaisuus ei ole enää tuettu.

Vinkki:Käytä CSS reunaviivan ominaisuus Muuta elementin reunaviivan tyyliä. Voit käyttää CSS reunaviivan ominaisuutta ulkoisessa tyyleissä, asettaaksesi kaikille sivuston kuville yhtenäiset reunaviivat. Tämä tapa on无疑isemmin tehokkaampi kuin asettaa border ominaisuus yksittäiselle kuvalle.

Yhteensopivuus huomiot

img-elementin border ominaisuutta ei suositella käytettäväksi; HTML 4.01 Strict ja XHTML 1.0 Strict DTD:ssä ominaisuus ei ole tuettu.

Käytä CSS:n sijaan.

CSS syntaksi: <img style="border:5px solid black">

CSS esimerkki: kuvareunat

Voit löytää enemmän tietoa CSS oppaastamme border ominaisuus yksityiskohdat.

Syntaksi

<img border="value" />

Ominaisuuden arvo

Arvo Kuvaus
pixels Reunaviivan leveys, pikseleinä.

TIY esimerkki

Tunniste <img> border-ominaisuus
Tämä esimerkki näyttää, miten voit muuttaa kuvan reunaa käyttämällä <img> -merkkiä border -ominaisuutta.

Lue lisää: Poista kuvien reunat

Voit poistaa kuvahyperlinkin reunat käyttämällä <img> -merkkiä border="0" -ominaisuudella. Jotkut kuvista, erityisesti kuvakartoista, ilman reunuksia voi parantaa sivun ulkoasua. Ja niille linkkipainikkeille, jotka selkeästi osoittavat olevansa toiseen kuvan viittauksen, ilman reunuksia voi tehdä kuvasta paremman näköisen.

Vaikka reunat poistaminen ei vähennä asiakirjan käyttökykyä, on syytä olla varovainen. Koska ilman reunuksia menetät yhden erittäin yleisen hyperlinkin visuaalisen viittauksen, mikä voi tehdä lukijalle vaikeaksi löytää nämä linkit. Selain muuttaa usein hiiren osoittimen muodon, kun se siirtyy hyperlinkin kuvan päälle, mutta ei voida odottaa, että selain aina tekee niin, eikä pitäisi antaa käyttäjiä tutkia ilman reunuksia kuvia löytääkseen nämä piilotetut linkit.

Suosittelemme vahvasti, että käytät muita menetelmiä yhdessä rajoittamattomien reunusten kuvien kanssa, jotta lukijasi tietävät, että heidän tulisi napsauttaa näitä kuvia. Vaikka yksinkertaiset tekstit ovat vaikeita tehdä dokumentista paremmin luettavaa, on vaikeaa tehdä asiakirjasta paremmin luettavaa.

HTML <img> -elementti