Comment faire ombre intérieure elliptique avec CSS?

Je veux une ombre intérieure elliptique comme celle-ci. Il devrait disparaître pour compléter la transparence sur les bords gauche et droit.Comment faire ombre intérieure elliptique avec CSS?

enter image description here

Jusqu'à présent, je n'ai été en mesure d'atteindre ce qui suit. Cela ne ressemble même plus à une ellipse.

enter image description here

#someDiv { 
    background: -moz-radial-gradient(
     50% 0%, 
     ellipse farthest-corner, 
     rgba(255,0,0,1) 0%, 
     rgba(255,0,0,0.00) 70% 
    ); 
    border: 3px solid black; 
    width: 30em; 
    height: 20em; 
}

Source

2012-02-08 JoJo

je doute que vous pouvez sans utiliser la toile. –

ellipse farthest-corner remplacer avec quelque chose comme 70% 20% et apportez des modifications à partir de là.

modifier: http://jsfiddle.net/ufLYQ/

Source

2012-02-08 19:40:25

Cela semble bien sur Webkit, mais cela ne fonctionne pas sur Mozilla. Je n'en ai pas besoin pour travailler dans IE. – JoJo

Oh ... eh bien. Désolé, je ne sais pas comment dans Mozilla, il suffit de regarder la spécification et il n'y a aucune façon apparente de faire une ellipse. Si vous vouliez vraiment devenir fou, vous pourriez essayer de définir l'arrière-plan d'une autre div imbriquée et ensuite utiliser des transformations pour l'écraser et la placer au sommet de l'autre div (qui devrait maintenant avoir 'overflow: hidden') –

Ce sont à peu près ce que vous avez besoin:

J'utiliser une nouvelle syntaxe de style pour mozilla: -moz-gradient radial (centre -10px, ellipse le plus éloigné côté, # ab0000, #ffffff 100%); Et quelque chose comme cette syntaxe ancienne pour webkit: -webkit-gradient (radial, 325 -530, 600, 265-235, 200, de (blanc), à (blanc), arrêt de couleur (. 8, rouge), couleur arrêt (.9, rouge))

Cela nécessitera quelques ajustements

Source

2012-02-08 21:13:02

Utilisez ce code pour Shadow elliptique élégant

<div class="box shadow-arch-center"></div> 

.box { 
    background-color: #9C9369; 
    width: 200px; 
    height: 50px; 
    margin: 50px auto; 
} 

.shadow-arch-center { 
    position: relative; 
} 

.shadow-arch-center:before, .shadow-arch-center:after { 
    position: absolute; 
    content: ""; 
    bottom: 10px; 
    z-index: -10; 
} 

.shadow-arch-center:before { 
    left: 2%; 
    right: 65%; 

    /* as box-shadows get smaller, opacities increase */ 
    box-shadow: 80px 0px 20px 22px hsla(0, 0%, 0%, .01), 
       70px 0px 20px 20px hsla(0, 0%, 0%, .02), 
       60px 0px 20px 18px hsla(0, 0%, 0%, .04), 
       50px 0px 20px 16px hsla(0, 0%, 0%, .08), 
       40px 0px 20px 14px hsla(0, 0%, 0%, .16), 
       30px 0px 20px 12px hsla(0, 0%, 0%, .16), 
       20px 0px 20px 10px hsla(0, 0%, 0%, .25), 
       10px 0px 20px 2px hsla(0, 0%, 0%, .5), 
       0 0 20px 2px hsla(0, 0%, 0%, 1); 

    transform: skewY(5deg); 
} 

.shadow-arch-center:after{ 
    left: 65%; 
    right: 2%; 

    /* as box-shadows get smaller, opacities increase */ 
    box-shadow: -80px 0px 20px 22px hsla(0, 0%, 0%, .01), 
       -70px 0px 20px 20px hsla(0, 0%, 0%, .02), 
       -60px 0px 20px 18px hsla(0, 0%, 0%, .04), 
       -50px 0px 20px 16px hsla(0, 0%, 0%, .08), 
       -40px 0px 20px 14px hsla(0, 0%, 0%, .16), 
       -30px 0px 20px 12px hsla(0, 0%, 0%, .16), 
       -20px 0px 20px 10px hsla(0, 0%, 0%, .25), 
       -10px 0px 20px 2px hsla(0, 0%, 0%, .5), 
       0 0 20px 2px hsla(0, 0%, 0%, 1); 

    transform: skewY(-5deg); 
}

Source

2015-12-15 12:37:39

Comment faire ombre intérieure elliptique avec CSS?

Répondre

Questions connexes