如何使用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;
}

- JoJo

---

我怀疑你不能不使用Canvas。 - Diodeus - James MacFarlane

Answer 1

将ellipse farthest-corner替换为70% 20%或类似的值，然后进行微调。

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

- user578895

---

在Webkit上看起来不错，但在Mozilla上无法工作。我不需要它在IE中工作。 - JoJo

哦...好吧，抱歉，在Mozilla中不确定如何操作，只是查看了规范，似乎没有明显的方法来制作椭圆形。如果你真的想疯狂一点，可以尝试设置另一个嵌套div的背景，然后使用变换将其压缩并放置在另一个div的顶部（现在必须具有overflow:hidden）。 - user578895

Answer 2

使用此代码创建优雅的椭圆形阴影

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

- Urooj Khan

Answer 3

这些就是你需要的：

我建议在mozilla中使用新的语法： -moz-radial-gradient(center -10px, ellipse farthest-side, #ab0000, #ffffff 100%);

而在webkit中使用旧的语法，类似于这样： -webkit-gradient(radial, 325 -530, 600, 265 -235, 200, from(white), to(white), color-stop(.8,red),color-stop(.9,red))

这需要进行一些微调。

- Michael Mullany