使用css3居中投影，可能嗎？

我想創建以邊框爲中心的投影，不想使用圖像作爲背景，但不知道第一種方法是什麼。使用css3居中投影，可能嗎？

沒有要求寫代碼，但如果有人提出了一個想法如何實現這將是非常好的。

我附上圖片以供參考，如果您注意到第一個圖像的中央有一個小陰影。

來源

2016-06-28 Sanjeev Kumar

你試過：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp – hakJav

是的，我非常清楚這件事，但我問題是不同的，我只在箱子正下方的底部中心尋找陰影。 –

您可以將水平陰影設置爲0，並根據需要編輯垂直線。例如：https://jsfiddle.net/9mqxdnLv/1/ – hakJav

您可以使用僞元素

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    background: white; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 20px; 
 
    top: 80px; 
 
    left:0; 
 
    position: absolute; 
 
    box-shadow: 0px 10px 5px #888888; 
 
    z-index: -1; 
 
}

<div></div>

來源

2016-06-28 17:37:28 LGSon

太好了，謝謝！ @LGSon我認爲它會工作。現在就試一試。 –

這是一個非常聰明的方式+1。 – Stickers

@Pangloss非常感謝:) – LGSon

那你引用的陰影實在是多。如果仔細觀察，它實際上是日曆頁面翻轉和漸變。必須提供許多關於如何做到這一點（這是一種蘋果風格）的變換和覆蓋。

更簡單地說，hakJav的評論和小提琴是對的。我已經修改了的jsfiddle

https://jsfiddle.net/5r7vqddt/8/

所以這是一個有點漂亮。最終，爲了得到一個梯度褪色

border-image: 
    linear-gradient(to bottom, black, rgb(your container bgColor here)) 20;

將要走的路。我在同一個小提琴上加入了一個。我相信有更好的方法來做到這一點。這裏是一個CSS-技巧鏈接機智一些有趣的例子： css-tricks border gradient examples

來源

2016-06-29 23:03:19 Mark

感謝@Mark爲您提供的信息，鏈接有很多不錯的收藏可供學習。 –

使用css3居中投影，可能嗎？

回答

相關問題