2010-08-29 6 views
5

site se trouve ici: CLICK TO VIEW THE WEBSITECSS3: Transparent Arrondi d'angle Problème

Voici une image du problème: alt text

Comme vous pouvez le voir, en utilisant CSS3 border-radius et background: transparent j'ai pu faire ce qui ressemble à une "découpe" de la div. Le problème devrait être évident que les coins sont transparents aussi bien. Je sais que je pourrais juste utiliser une image et le problème serait résolu, mais je veux utiliser CSS3. Je pense qu'il y a probablement une façon ingénieuse de contourner ce problème, mais je n'y pense pas. Je tiens à noter que j'utilise css3pie.com pour permettre la fonctionnalité IE6 à IE8 CSS3.

+0

Je pense que dans ce cas une image * serait approprié *, esp. avec la façon dont vous essayez de coudre ensemble ce fond ... –

+0

offtopic: utilisation intelligente de l'image et le fond gradient. pendant un moment, je me demandais pourquoi l'arrière-plan avait été redimensionné quand j'avais agrandi la fenêtre de mon écran haute résolution. – mauris

+0

+1 question est intresting –

Répondre

1

C'est un peu hacky

Cette règle s'appliquent à la balise p

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

Merci beaucoup. Je n'ai même pas pensé à faire une boîte d'ombre. – ParoX

0

Cela a fonctionné pour moi dans la barre d'outils de développement dans Chrome ...

Sur div.middle_bg régler la hauteur de 85px. Définissez ensuite l'arrière-plan sur l'étiquette p à l'intérieur.

+0

Quelle version de Chrome fonctionne-t-elle pour vous? Cela ne fonctionne pas pour moi en utilisant la version bêta de Chrome 6.0.472.51 sous OSX. Cela ne fonctionne pas non plus dans Safari 5.0.1 sous OSX. Dans les deux cas, je vois la découpe comme indiqué ci-dessus. – gutch

+0

Même ici. le tag 'p' l'a déjà réglé sur' background: transparent' ... – ParoX

+0

Oh ... je n'ai pas remarqué que ça devait être transparent. Ignorer, je suis stupide :) – Corey