我需要通過CSS3在邊框底部應用邊框陰影。我只想在底部應用CSS3陰影。這可能嗎?如何在邊框底部製作陰影?
回答
嘗試:
div{
-webkit-box-shadow:0px 1px 1px #de1dde;
-moz-box-shadow:0px 1px 1px #de1dde;
box-shadow:0px 1px 1px #de1dde;
}
<div>wefwefwef</div>
它通常把從盒子的底部1px的模糊陰影1px的
box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
這是件好事。但我只有底部邊框,我想遮蔽它。當我使用上面的代碼時,左側和右側的陰影也會出現。 – 2014-10-17 12:58:10
所有這些asnwers是不相關的 - 因爲它總是產生其他不必要的陰影:) – 2017-10-22 20:47:13
難道你不知道,有沒有底的影子呢?有陰影到處轉轉元素,除了頂部 – Green 2017-10-27 15:02:44
使用box-shadow
沒有水平偏移量。
http://www.css3.info/preview/box-shadow/
例如,
div {
-webkit-box-shadow: 0 10px 5px #888888;
-moz-box-shadow: 0 10px 5px #888888;
box-shadow: 0 10px 5px #888888;
}
<div>wefwefwef</div>
將有在側面上的輕微陰影具有大模糊半徑(在上述的例子5像素)
的問題是影子走出包含div的一面。爲了避免這種情況,模糊值必須等於擴展值的絕對值。
div {
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
}
<div>wefwefwef</div>
在深度覆蓋here
新方法的老問題
好像在回答提供的問題一直是如何該框邊框可以在對象的左側和右側顯示,或者您必須將其插入到目標位置,否則它不會正確遮蔽容器的整個長度。
本示例使用:after
僞元素以及具有透明度的線性漸變,以便將陰影投影到完全延伸到要陰影元素兩側的容器上。
值得注意與此解決方案是,如果您使用填充您希望投影的元素,它將無法正確顯示。這是因爲after
僞元素將其內容直接追加到元素內部內容之後。所以如果你有填充,陰影會出現在框中。這可以通過消除外部容器上的填充(應用陰影)以及使用內部容器來應用所需的填充來克服。
例與填充和背景顏色的陰影DIV:
如果要更改陰影的深度,只需增加height
風格在after
僞元素。您也可以明顯地使線條漸變樣式變暗,變亮或更改顏色。
body {
background: #eee;
}
.bottom-shadow {
width: 80%;
margin: 0 auto;
}
.bottom-shadow:after {
content: "";
display: block;
height: 8px;
background: transparent;
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */
}
.bottom-shadow div {
padding: 18px;
background: #fff;
}
<div class="bottom-shadow">
<div>
Shadows, FTW!
</div>
</div>
- 1. 如何陰影底部
- 2. Swift UITextField邊框底部和陰影問題
- 3. 在UIImage上繪製邊框和陰影
- 4. 底部陰影到ListPopupWindow android
- 5. CollectionView底部的陰影
- 6. 如何設置UItextview邊框的陰影?
- 7. 應用底部框陰影在左側和右側底部留下一些陰影空間
- 8. 我該如何在css中製作邊框,在頂部和底部有不同的顏色,底部有一些陰影?
- 9. 沒有在頂部或底部顯示框陰影
- 10. Android按鈕邊框陰影
- 11. HTML/CSS「陰影」邊框?
- 12. Createjs陰影只在右側和底部
- 13. UITableView陰影頂部和底部
- 14. 頂部和底部的盒子陰影
- 15. 從UIWebView刪除頂部/底部陰影?
- 16. 如何設置一個盒子陰影的div元素的所有方面,左陰影,右陰影,頂部陰影,底部陰影?
- 17. css嵌入框陰影頂部,左側,右側,底部圖像
- 18. 如何製作邊框底部動畫和忽略填充
- 19. Javascript CSS菜單邊框/框陰影
- 20. 一個帶有內部和外部邊框陰影的圓圈有1px邊框
- 21. 添加陰影UINavigationBar的底部只有
- 22. 水平線但底部有陰影
- 23. 刪除div底部的方塊陰影?
- 24. JInternalFrame的底部陰影問題
- 25. 如何刪除底部陰影的的導航欄在swift3
- 26. 如何在底部增加圓形陰影導航
- 27. Jqueryui:如何在對話框中製作陰影?
- 28. 如何在大字體上製作內部陰影效果?
- 29. 邊框頂部的陰影和三角形向下在css
- 30. 如何與圖像重疊邊框並在邊框上添加陰影效果?
這在深度覆蓋的位置:http://stackoverflow.com/questions/5460129/drop-shadow-only-bottom-css3 – 2015-01-06 20:41:34