如何用CSS制作椭圆内阴影？

Question

我想要像这样的椭圆形内部阴影。它应该淡化以完成左右边缘的透明度。

到目前为止，我只能达到以下目的。它甚至看起来都不像椭圆了。

#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;
}

Answer 1

用ellipse farthest-corner之类的内容替换70% 20%并从那里进行调整。

编辑：http://jsfiddle.net/ufLYQ/

Answer 2

这些非常接近您的需求：

我会为mozilla使用新的样式语法： -moz-radial-gradient（中心-10px，椭圆最远侧，＃ab0000，＃fffffff 100％）;

类似于webkit的旧式语法： -webkit-gradient（径向，325 -530,600,265 -235,200，从（白色）到（白色），颜色停止（.8，红色），颜色停止（.9，红色））< / p>

这需要一些调整

Answer 3

使用此代码优雅椭圆阴影

<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);
}