帶有圓角和非常淺橢圓形狀的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 。 它更適合你想要的東西。

要在Illustrator中使用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 */
}

了解有關CSS Masking和瀏覽器支持的更多信息 。

Answer 2

改編自這里

如果它准確地指出你正在尋找什么，我可以弄亂邊界半徑並將其環繞或壓扁它。

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

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