☰

» »

slike (img) ter zaobleni robovi (css)

slike (img) ter zaobleni robovi (css)

Veron ::

mogoče kdo točno ve, kateri brskalniki znajo z css kodo kot je:

img {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}


Trenutno opažam, da samo Chrome to naredi, nevem zakaj imam v spominu, da tud Firefox in opera nista mela problemov s tem včasih. Ali pa FF in opera dovoljujeta raidus le pri border?

MrBrdo ::

Em v Firefoxu bi moralo delat, da nimaš kakšno zelo staro verzijo... Drugače pa v chromu dela ja, pa moralo bi še v safariju (webkit), za opero pa ne vem kako je. V IE pa tako ali tako nič dobrega ne dela.
Jaz to uporabljam na tej strani: http://profesorji.net/ tako da za štos lahko probaš to v FF odpret in poglej če so zaobljeni robovi okoli glavnega "okna", ki je čez (sivo) ozadje.
MrBrdo

Zgodovina sprememb…

  • spremenilo: MrBrdo ()

Veron ::

FF 3.6.8. ne zarobi slike,
Safari 4.0.5 zarobi,
Opera 10.62 ne zarobi.

za IE pa vem in tudi nisem pričakova da bo delalo.

MrBrdo ::

A si pogledal profesorji.net v FF? Meni v 3.6.8 vredu zarobi, to moraš imet ti nekaj čudno...
MrBrdo

misek ::

Opera 10.60 in 10.61 zarobi.

srus ::

FF 2.6.9 na Win zarobi.

Veron ::

upam, da ste dobro pogledali katero kodo sem napisal, gre za robove na img tagu (slikah) :-)

fizikalac ::

Mozilla, chrome, safari, konqueror in opera bi to sliko lepo zarobili. A si prepričan da to na Firefox ne dela? Probaj pobrisat cache pa narest hard refresh ker res ne verjamem da ne dela :)

Lion29 ::

meni tudi v FF ne zaobli robov na sliki, tudi zadnja opera jih ne...

zanimivo, ie9 pa jih!

FF in opera pa zaobljita le dejanski ROB (torej ce dolocis recimo border:1px solid black)... pr IE9 in chrome-u pa jih ni treba dolocat
Founder and CTO @ Article-Fatctory.ai

Zgodovina sprememb…

  • spremenil: Lion29 ()

Veron ::

tega odgovora sem se bal (lio29). ni kaj, upamo na boljše čase, da bodo v novejše verzije tudi to vključili kot chrome in ie9

fizikalac ::

Pa res, sramota za FF :D

Tukaj imaš 2 rešitvi:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}


#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}


Zelo lesena načina, ampak probat ni greh 8-)

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151796 (1524) kr?en
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61704 (1584) jonystar
»

[CSS] HTML5, CSS3 + IE8

Oddelek: Izdelava spletišč		92573 (2359) nuclear
»

ID in CLASS

Oddelek: Izdelava spletišč		5545 (517) inbox
»

CSS3 - Border Radius

Oddelek: Izdelava spletišč		71083 (1002) HardFu

Več podobnih tem