回答
這在技術上是相同的答案@ChrisJ,對如何使box-shadow
聽從你的命令更多的一些細節:
參考的*爲可選項目:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
<spread-radius>
需要爲負數<blur-radius>
(以便其他模糊邊不會出現),然後您需要將<offset-y>
向下等量:
box-shadow: inset 0 20px 20px -20px #000000;
它會給你一個橫跨元素頂部的單梯度帶。
盒子陰影在每個方向上偏移給定量的陰影。所以你需要x-offset爲0,y-offset爲負值。
此外,您必須使用模糊半徑和傳播半徑,以便陰影在左側和右側不可見。
實施例:
box-shadow: #777 0px -10px 5px -2px;
更好的方法是使用背景漸變,這裏是並排的。
這是我做的一點小事。
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
創建
<div class="one_side_shadow"></div>
正確的,我想創建所述一個側框的陰影的元件的下方(在這個情況下,我想爲id="element"
單側插入陰影從底部推出)然後,我使用負的垂直偏移量將陰影向上推至一側,從而創建了一個常規盒子陰影。
box-shadow:0 -8px 20px 2px#DEDEE3;
實施例:
box-shadow: 0 2px 0px 0px red inset;
所述第一參數和第二參數指定陰影到x方向和y方向上的偏移量分別。 第三個參數指定模糊距離。 最後,第四個參數指定傳播距離。
僅指定具有所需偏移量的第二個參數可以獲得沒有側影的頂部陰影。
演示可以在這裏找到:對CSS3盒陰影http://jsfiddle.net/rEdBy/
一個很不錯的教程 - http://www.css3.info/preview/box-shadow/
也許嘗試使用的box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
具有溢出-X:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
使用overflow-x: hidden;
和box-shadow: 0px 10px 16px -10px #000;
這是我的例子請再試一次
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
- 1. 使用CSS3盒子陰影的三面一個像素陰影
- 2. CSS3的盒子陰影問題
- 3. CSS3問題:如何在div頂部沒有盒子陰影?
- 4. tr的盒子陰影
- 5. 如何設置一個盒子陰影的div元素的所有方面,左陰影,右陰影,頂部陰影,底部陰影?
- 6. CSS盒子陰影重疊
- 7. 如何修復IE8中的CSS3 PIE盒子陰影問題
- 8. Firefox中的CSS3盒子陰影渲染問題
- 9. 用CSS3創建彎曲的盒子陰影
- 10. IE 9盒子陰影沒有顯示
- 11. CSS3陰影
- 12. CSS3框陰影
- 13. 盒陰影沒有出現在雙方
- 14. 沒有頂盒陰影?
- 15. 用CSS創建盒子陰影的最有效方法
- 16. 兩個盒子的CSS陰影爲一個
- 17. IE7和IE8中的盒子陰影
- 18. 意外的盒子陰影行爲
- 19. 頂部和底部的盒子陰影
- 20. 適用於svg盒子的Css陰影
- 21. IE的盒子陰影效果
- 22. 將額外的盒子陰影添加到現有陰影未知的元素
- 23. CSS3:只有沒有父背景的陰影
- 24. 代碼CSS3陰影的最佳方法?
- 25. 如何做到在IE盒子陰影?
- 26. IE盒子陰影CSS不工作
- 27. 如何移動盒子陰影?
- 28. PIE CSS:RGBA背景+盒子陰影
- 29. OuterDiv盒子陰影總是在頂部
- 30. 盒子陰影不起作用
不,那是行不通的。偏移量是x和y不是左和右。 – Mark 2011-01-21 08:00:47
我沒有這麼說:x-offset是水平偏移量; y-offset是垂直偏移量。所以有陰影在頂部,你需要有y偏移量<0 – ChrisJ 2011-01-21 15:10:41
@馬克它不工作,如果你知道如何使用<傳播半徑> – zzzzBov 2011-01-21 20:02:40