如何才能實現像蛋一樣的邊界半徑

Question

我能用css3實現這種圖像風格嗎？

我已經設置邊框的這種風格在

.image img {border-radius: 40% 60% 60% 40%/50%; } 

，但我認爲這是不正確的。

Answer 1

您可以創建一個僞elemnts類似的東西產生。首先要創建該形狀，您可以使用border-radius，然後可以爲灰色區域添加較大的box-shadow，爲該藍色陰影添加一個。

.egg { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 

 
.egg:after { 
 
    content: ''; 
 
    width: 250px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 200px; 
 
    margin: 50px; 
 
    transform: rotate(-135deg); 
 
    box-shadow: -7px -7px 0px 0px #67BEF9, 0px 0px 0px 400px #ECECEC; 
 
    border-radius: 204px 109px 106px 212px/125px 110px 110px 125px; 
 
}

<div class="egg"> 
 
    <img src="https://st.hzcdn.com/simgs/25e1d6580f5a3538_4-1972/traditional-staircase.jpg" alt=""> 
 
</div>

Answer 2

我會給你一個雞蛋的小代碼。它是由邊界半徑

#egg { 
 
     display:block; 
 
     width: 126px; 
 
     height: 180px; 
 
     background-color: red; 
 
     -webkit-border-radius: 63px 63px 63px 63px/108px 108px 72px 72px; 
 
     border-radius:   50% 50% 50% 50%/60% 60% 40% 40%; 
 
    }

<div id="egg"></div>

Answer 3

<div style="height=;height: 505px;width: 655px;background-color: #ececec;"> 
    <img src="test_img.png" height="500" width="650" style="border-top-left-radius: 100% 100%;border-top-right-radius: 100% 160%;border-bottom-left-radius: 135% 100%;border-bottom-right-radius: 50% 50%;"> 
</div>