带有圆角和非常浅椭圆形状的CSS3图像

Question

您好我想在CSS3中构建一个圆角和非常浅的椭圆形图像，就像在这张照片中一样。

不确定是否可能以及如何实现。我知道如何建立圆形图像或圆角图像，但这有点不同。

更新 这就是我所做的

.round{
    background-color:red;
    width:100px;
    height:100px;
    border-top-left-radius: 45px 40px;
    border-top-right-radius: 45px 40px;
    border-bottom-left-radius: 45px 40px;
    border-bottom-right-radius: 45px 40px;
}

http://jsfiddle.net/7t1z3hxf/9/

UPDATE2 以下是我想要实现的原理图

由于

Answer 1

如果您想要完美的精确度，我建议mask-image而不是border-radius。它更适合你想要的东西。

要在CSS中将Illustrator构建的（？）形状用作mask，请将其导出为带透明bg的SVG或PNG。

这适用于Chrome，Safari和Opera，但您需要使用带前缀的-webkit-mask-image。该属性正在与仅应用于SVG的CSS mask-image合并，因此当前需要前缀。对于其他浏览器，您可以选择较不精确的border-radius。

.round{
 -webkit-mask-image: url(yourshape.png);
 -webkit-mask-size: contain;
 -webkit-mask-position: center center;
 /* ... border-radius as fallback */
}

Learn more about CSS Masking和浏览器支持。

Answer 2

改编自Here

如果它准确地说明了你正在寻找的东西，我可以弄乱边界半径并将其环绕或压扁它。

#round {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px 0;
  background: orange;
  border-radius: 48% / 25%;
  color: white;
}
#round:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 11%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 21% / 68%;
}

<div id="round"></div>

Answer 3

如果我理解得对，你想要这样的东西。

HTML：

<DIV CLASS="TEST"></DIV>

CSS：

.TEST{
   width:230px;
   height:240px;
   background-image:url(IMAGE.JPG);
   border-radius:100px;
   background-position:center center;
   background-size::230px 240px;
 }

您可以更改值以获得所需的位置。