陰影 - 沒有圓角或模糊影子

我瞭解CSS盒陰影性質，從這裏開始： http://css-tricks.com/snippets/css/css-box-shadow/陰影 - 沒有圓角或模糊影子

我想用類似的影子：.one-edge-shadow。
問題是我不希望陰影的角落變得模糊（並且變圓）。

我該如何做到這一點？（最好是優雅地）。

編輯：
比較形象：http://new.tsaviation.com/images/cpm155/drop-shadow-vs-bottom-shading.jpg

來源

2013-05-31 Samuel Fullman

你能告訴我們你已經嘗試過什麼？你究竟想要什麼？ – funerr

好吧，我想這將是一個簡單的職位。這是一個比較的鏈接：http://new.tsaviation.com/images/cpm155/drop-shadow-vs-bottom-shading.jpg –

謝謝，我想我理解你的請求，看到我的答案。 – funerr

從我個人理解，你想有一個底部陰影，不具有在其底部邊角半徑屬性，對不對？

如果是這樣，你可以「附加」一個基本上是漸變背景的div的「陰影」。

DEMO

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <!-- Trick shadow --> 
    <div id="box"> 
    <div class="shadow-bottom"></div> 
    </div> 
</body> 
</html>

CSS：

#box{ 
    width:5em; 
    height:5em; 
    background-color:#6c6c6c; 
    margin:5em auto; 
} 

/* New shadow element */ 
.shadow-bottom{ 
    position:relative; 
    top:5em;/*height of box*/ 
    height:25%; 
    width:100%; 
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=0); /* IE6-9 */ 

}

來源

2013-06-02 15:06:48 funerr

陰影 - 沒有圓角或模糊影子

回答

相關問題