2010-08-29 14 views
5

Site si trova qui: CLICK TO VIEW THE WEBSITECSS3: trasparente arrotondato angolo Problema

Ecco un'immagine del problema: alt text

Come si può vedere, utilizzando CSS3 border-radius e background: transparent sono stato in grado di fare quello che sembra un "ritaglio" dal div. Il problema dovrebbe essere ovvio che anche gli angoli sono trasparenti.

So che potrei semplicemente usare un'immagine e il problema sarebbe risolto, ma voglio usare CSS3. Penso che probabilmente ci sia un modo ingegnoso per aggirare questo problema, ma non ci sto pensando. Voglio sottolineare che sto usando css3pie.com per consentire IE6 tramite la funzionalità CSS3 di IE8.

+0

Penso che in questo caso un'immagine * * sarebbe opportuno, esp. con il modo in cui stai cercando di ricucire quello sfondo ... –

+0

offtopic: uso intelligente dell'immagine e del gradiente dello sfondo. per un momento mi chiedevo perché lo sfondo si ridimensionava quando ingrandivo la finestra sullo schermo ad alta risoluzione. – mauris

+0

La domanda +1 è interessante –

risposta

1

Questo è un po 'hacky

Questo regole si applicano al tag p

-webkit-box-shadow: #A3AFC6 0px -4px 0px 3px; 
+0

Grazie mille. Non ho nemmeno pensato di fare un'ombra di scatola. – ParoX

0

Questo ha funzionato per me nella barra degli strumenti di sviluppo in Chrome ...

Sulla div.middle_bg impostare l'altezza a 85px. Quindi imposta lo sfondo sul tag p al suo interno.

+0

In quale versione di Chrome funziona? Non funziona per me utilizzando Chrome 6.0.472.51 beta su OSX. Inoltre, non funziona su Safari 5.0.1 su OSX. In entrambi i casi vedo il ritaglio come mostrato sopra. – gutch

+0

Lo stesso qui. il tag 'p' lo ha già impostato su' background: transparent' ... – ParoX

+0

Oh ... non ha notato che doveva essere trasparente. Ignorare, sono stupido :) – Corey

Problemi correlati