0
A
回答
3
是否這樣?
.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
.fancy-line:before {
top: -0.5em;
height: 1em;
}
.fancy-line:after {
height: 0.5em;
top: calc(-0.5em + 1px); /* adjusted this */
}
.fancy-line:before, .fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
.fancy-line, .fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 75%);
}
body, .fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<div class="fancy-line"></div>
原始代碼產生徑向漸變並覆蓋它的底部一半用彩色一樣的背景的塊。根據您的要求調整它只是將覆蓋物從底部移動到頂部的問題。請注意:hr
元素必須自行關閉。這排除了使用:before
和:after
,因爲自閉元素不能有孩子。在參考答案中,他們沒有使用hr
的任何特殊功能,所以我在這裏將其轉換爲div
。
1
在此請看:http://jsfiddle.net/9rovqvoj/1/
它基本上是相同的,但加入僞元素之前口罩:之前不是:後添加的z-index它。
hr.fancy-line:after {
top: -0.5em;
height: 1em;
}
hr.fancy-line:before {
content: '';
height: 0.5em;
top: -0.5em;
z-index: 999;
}
+0
謝謝你的回答。不過,我更願意接受@Ouroborus的答案作爲解決方案,因爲它使用了正確的HTML代碼(並且它不使用z-index,這對我來說更像是一個CSS技巧,因爲陰影是由:元件)。 –
+0
這是在僞元素之前的z-index,我錯過了刪除行頂部顯示的陰影 –
相關問題
- 1. CollectionView底部的陰影
- 2. 底部陰影到ListPopupWindow android
- 3. 如何陰影底部
- 4. UINaviguationBar底部陰影消失
- 5. 只有底部的箱子陰影
- 6. 添加陰影UINavigationBar的底部只有
- 7. 射線追蹤陰影/底紋僞影
- 8. 從UIWebView刪除頂部/底部陰影?
- 9. UITableView陰影頂部和底部
- 10. 底部頂部的複製框陰影
- 11. 頂部和底部的盒子陰影
- 12. 動態水平滾動陰影
- 13. 如何設置一個盒子陰影的div元素的所有方面,左陰影,右陰影,頂部陰影,底部陰影?
- 14. 如何去除UINavigationBar的底部陰影?
- 15. 刪除div底部的方塊陰影?
- 16. Createjs陰影只在右側和底部
- 17. 底部圖像上的陰影像facebook
- 18. Android:將陰影應用於ImageView底部
- 19. 從底部移除盒子的陰影
- 20. Android底部導航欄帶陰影
- 21. JInternalFrame的底部陰影問題
- 22. CSS框陰影不顯示在底部
- 23. 從Android的TextView的底部給線性漸變陰影
- 24. 沒有在頂部或底部顯示框陰影
- 25. CSS盒子陰影 - 頂部和底部只有
- 26. 用陰影畫一條線,但只想保持陰影。 IOS
- 27. 如何在滾動時添加頂部和底部陰影,但僅在需要時添加陰影?
- 28. 應用底部框陰影在左側和右側底部留下一些陰影空間
- 29. 文字陰影,但不能刪除線
- 30. 問題襯底底部陰影與橫幅圖像
顯示您嘗試過的代碼。 – Ouroborus