創建曲面與陰影顏色漸變

這裏是我想只用CSS來複制，我只是不能工作了如何做到這一點陰影。我花了數小時嘗試。我認爲我需要創建2個陰影元素，但我不知道如何繼續。
我得到的最接近的事與此（九流嘗試 - 我知道）：

.type-product:before, .type-product:after{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 25px; 
    left: 21px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    background: #777; 
    box-shadow: 0 35px 20px #777; 
    transform: rotate(-8deg); 
} 
.type-product:after{ 
    transform: rotate(8deg); 
    right: 20px; 
    left: auto; 
}

最欣賞的，如果任何CSS大師可以提供任何幫助。

注意：我不認爲this link完全覆蓋我的問題。它只是討論曲線 - 雖然我需要一條具有顏色梯度的曲線...

來源

2016-03-15 Ben

圖片來自哪裏？它是來自另一個網站的屏幕抓圖嗎？如果是這樣，你可以檢查它是如何完成的。 – putvande

@putvande謝謝，但這是一個圖像不是從任何網站（我知道 - 否則會很簡單）...請讓我知道，如果你知道一個網站，使用這種類型的影子......我花了負載的時間尋找... – Ben

有很多例子可以在谷歌上找到：http：//nicolas.gallagher.com/css-drop-shadows-without-images/demo/ – almo

您可以:before僞元素做到這一點，box-shadow

div { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #aaa; 
 
    position: relative; 
 
    background: white; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    z-index: -1; 
 
    left: 0; 
 
    transform: translateY(103%); 
 
    box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999; 
 
}

<div></div>

來源

2016-03-15 12:54:46

謝謝你噸！我需要調整一下，但這真的幫助我 - 真的很感激！ :-) – Ben

對我來說，看起來像是可以使用如下所示的幾個元素來實現的東西。陰影實際上是一個linear-gradient，其上放置了一個白色圓圈。這種方法的缺點是隻能使用純色背景（因爲覆蓋的圓會需要純色）。

看起來好像不可能使用box-shadow，因爲陰影本身看起來像是一個漸變，從左邊的透明或白色變爲中間的黑色，再次變爲右邊的白色。

輸出響應並且可以適應父容器的所有維度。只是:hover在片段容器看到它在行動:)

.wrapper { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
} 
 
.content { 
 
    height: 85%; 
 
    width: 100%; 
 
    border: 1px solid; 
 
} 
 
.wrapper:before { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    height: 15%; 
 
    width: 100%; 
 
    background: linear-gradient(to right, transparent 2%, #444, transparent 98%); 
 
} 
 
.wrapper:after { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: -186%; 
 
    /* height of before - height of after - 1% buffer for the small gap */ 
 
    left: -50%; 
 
    height: 200%; 
 
    width: 200%; 
 
    border-radius: 50%; 
 
    background: white; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
/* just for demo */ 
 

 
.wrapper { 
 
    transition: all 1s; 
 
} 
 
.wrapper:hover { 
 
    height: 300px; 
 
    width: 400px; 
 
}

<div class='wrapper'> 
 
    <div class='content'></div> 
 
</div>

來源

2016-03-15 12:45:05 Harry

很好地完成！我會說這是不可能的。很高興被證明是錯誤的。 –

謝謝！但@ nenad的工作更容易...謝謝！ – Ben

除了一個這也可能對你的班級來說也是一個很好的箱子陰影。（這只是首選&類似於你想要的）。

.box { 
 
    width: 70%; 
 
    height: 200px; 
 
    background: #FFF; 
 
    margin: 40px auto; 
 
} 
 
.type-product { 
 
    position: relative; 
 
} 
 
.type-product:before { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 70%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(-8deg); 
 
} 
 
.type-product:after { 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 17px; 
 
    right: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width: 300px; 
 
    background: #777; 
 
    box-shadow: 0 18px 20px #777; 
 
    transform: rotate(8deg); 
 
}

<div class="type-product box"> 
 

 
</div>

希望你喜歡它。

來源

2016-03-15 13:08:02 Graphicoding

創建曲面與陰影顏色漸變

回答

相關問題