带有圆角和非常轻的椭圆形的 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/

更新2 这是我想要实现的示意图

谢谢

Answer 1

如果您想要完美的精度，我推荐mask-image 而不是border-radius。它更适合您想要的。

要将您的 Illustrator-built(?) 形状用作 CSS 中的 mask，请将其导出为带有透明背景的 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;
 }

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