如何只用下面的CSS添加一個盒子陰影到底部？

我有以下的CSS代碼：如何只用下面的CSS添加一個盒子陰影到底部？

 box-shadow: 0px 1px 5px #888; 
    -moz-box-shadow: 0px 1px 5px #888; 
    -webkit-box-shadow: 0px 1px 5px #888;

如何讓這個只有底部邊框顯示。我有一個模糊半徑，所以不知道要更改或添加到上面的代碼片段。

來源

2013-03-29 starbucks

什麼是元素使用的HTML，它在容器中的寬度是否爲100％？如果存在，則可以在容器上使用「overflow：hidden」。 – Jamie

根據模糊半徑減小擴展距離（即擴展距離需要補償模糊增加）。不要忘記調整偏移量以彌補傳播的減少。

box-shadow: 0px 4px 5px -3px #888;

http://jsfiddle.net/p469p/

你也只需要box-shadow。 Mozilla和Webkit已經支持它for a long time。

而對於更多的信息請參見drop shadow only bottom css3

來源

2013-03-29 20:21:46

請記住，如果您的「陰影」元素要超過另一個元素（女巫具有溢出：隱藏），則可能需要底部邊距。陰影在盒子外面。 –

<!DOCTYPE html> 
    <html> 
     <head> 
     <style> 
      div { 
      box-shadow: 0px 2px #888; 
      } 
     </style> 
     </head> 
    <body> 
    <div> 
     The border-radius property allows you to add rounded corners to elements. 
    </div> 
</body>

那是唯一的辦法

來源

2013-03-29 20:24:39 user2225595

你可能想看看張貼在這個StackOverflow的解決方案：

drop shadow only bottom css3

來源

2013-03-29 20:33:21 fletch

你湊合d在背景上使用線性漸變：

background:linear-gradient(transparent 0%, transparent 90%,rgba(0,0,0,.7) 90%,transparent 100%);

來源

2017-08-23 17:13:13 ecalvo

如何只用下面的CSS添加一個盒子陰影到底部？

回答

相關問題