Border-radius a obrázky ve webkitu

verified

8. 8. 2011 22:40:17

Dejme tomu, že mám podobný seznam:

html:

css:

Firefox a IE9(zrovna tam bych to nečekal) kulaté rohy vyrenderují správně. V Chrome, Safari a Opeře jsou kulaté rohy jakoby na pozadí a hrany obrázku nad nimi. Zkoušel jsem obrázek obalit kontejnerem a styly nastavit jemu, přiřadit styly jak kontejneru, tak obrázku nebo kontejneru přidat overflow: hidden, ale nic z toho nefunguje.

Momentálně to řeším tak, že obrázek překryju absolutně pozicovaným divem s kulatými rohy a obrázku přidám margin o velikosti okraje:

html:

css:

Pro menší rohy to funguje, ale pro větší už by se to takhle řešit nedalo. Neznáte někdo lepší řešení?

8. 8. 2011 22:40:17

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664596

verified

(48 hodnocení)

8. 8. 2011 23:11:09

Doporučoval bych CSS3 deklarace používat i s prefixy. Pokud chyba přetrvává, dodej odkaz na živou ukázku. Všechny tebou zmíněné prohlížeče border-radius umí.

-webkit-border-radius: 10px;
-moz-border-radius:10px;
border-radius: 10px;

8. 8. 2011 23:11:09

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664595

verified

8. 8. 2011 23:13:13

Prefixy samozřejmě používám, tohle je ukázka.

8. 8. 2011 23:13:13

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664594

Jiří Březovský

verified

10. 8. 2011 18:12:50

http://maestric.com/doc/css/rounded_corners_images - co myslíš? :-) Přes CSS3 nikdy nedokážeš, aby obrázky všude s kulatými rohy.

10. 8. 2011 18:12:50

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664593

verified

(48 hodnocení)

10. 8. 2011 18:43:34

Napsal CaRg1;687935
http://maestric.com/doc/css/rounded_corners_images - co myslíš? :-) Přes CSS3 nikdy nedokážeš, aby obrázky všude s kulatými rohy.

Předpokládám, že 800XE chce použít CSS3 a jde mu o korektní funkčnost v moderních prohlížečích, nikoli alternativy řešení.

10. 8. 2011 18:43:34

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664592

Jiří Březovský

verified

10. 8. 2011 19:21:36

Já to beru, jen říkám, že si myslím že to nepůjde, tak jsem nabídl řešení :-)

10. 8. 2011 19:21:36

https://webtrh.cz/diskuse/border-radius-a-obrazky-ve-webkitu#reply664591

Pro odpověď se přihlašte.

Prodej Více

E-shop Masterioso + skladové zásoby (za 0.5mil)

50 000 Kč

0 příhozů

ebar.cz

9 999 Kč

0 příhozů

Prodej domény OnlineMapy.cz (since 2012)

4 999 Kč

0 příhozů

Webové stránky www.partyvideo.cz + Platforma 360° s příslušenstvím

50 000 Kč

0 příhozů

Prodej e-shopů Mnaushop.cz + Mnaushop.sk (cca 3500 sledujících na FB a 620 na IG)

3 850 Kč

1 příhoz

Poptávky Více

Obchodník pro eshop se softwarem

Hledám b2b obchodníka

Hledám programátora pro dokončení webu

Pipedrive – napojení leadů přes API

Pracovní nabídky Více

.NET vývojář

🎲Redaktor s němčinou, který chce psát pro projekt, co má smysl 🌎!

Práce z domu, Praha

40 000 - 60 000 Kč

Student VŠ (informatika s nadšením do AI)

Brno, Práce z domu

Automated Tester

Práce z domu, Praha

Nabídky Více

Velkoobchodní odběr software

🎬🎬🎬 Oživte své nápady pomocí explainer vysvětlujícího videa od Webico – Přetváříme myšlenky ve vizuální zážitky 🎥

👑👑👑 Rozjeďte svůj byznys s eshopem na Shoptetu. Vytvoříme Vám eshop, který prodává 💸

🚀🚀🚀 Nakopněte svůj byznys s profesionálním firemním webem na WordPressu od Webico

✨✨✨ Vybudujte úspěšný e-shop na Shopify s profesionální pomocí od Webico. Prodávejte do celého světa 🌍️