刪除不必要的陰影陰影框

根據我對箱影的研究。它需要以下參數：

DIV { 
box-shadow: <horizontal> <vertical> <blur> <color> [inset] 
}

請爲此找到jsfiddle。

I want to Create Box shadow as given below.

要創建上面的例子中，我需要使用箱陰影。

例如1，我用下面的風格：

box-shadow:0px 10px 22px 0px gray;

在這裏，我得到的頂部輕影，左側和右側也（我不希望）

在示例2 ，我用下面的風格：

box-shadow:10px 10px 22px 0px gray inset;

我不想內右側和底部的陰影部分。

是否可以刪除不必要的陰影陰影？

來源

2012-07-20 Umesh Patil

您可以有一個盒子陰影只在一側，兩側，三側，但在這種情況下，你應該設置模糊值爲零 - 看演示http://dabblet.com/gist/1579740

但是，您可以模擬第一種陰影通過包裹你的div到另一個相同寬度的外部div，但稍大的高度上，你設置overflow: hidden;

如果你不需要你的div的背景是半透明的，那麼你也可以模仿第二個一個使用絕對定位的僞元素來掩蓋底部和右側陰影。

DEMO http://dabblet.com/gist/3149980

HTML爲第一陰影：

<div class="outer"> 
    <div class="shadow1"></div> 
</div>

CSS爲第一陰影

div { 
    width: 100px; 
    height: 100px; 
} 
.outer { 
    padding-bottom: 35px; 
    overflow: hidden; 
} 
.shadow1 { 
    box-shadow: 0px 10px 22px 0px gray; 
    background: #f0f0f0; 
}

HTML爲第二陰影

<div class="shadow2"></div>

CSS爲第二次非正式

.shadow2 { 
    box-shadow:10px 10px 22px 0px gray inset; 
    position: relative; 
    background: #f0f0f0; 
} 
.shadow2:before { 
    top: 22px; 
    bottom:0; 
    left:22px; 
    right:0; 
    position: absolute; 
    background: #f0f0f0; 
    content:''; 
}

來源

2012-07-20 09:56:37 Ana

其良好的理念來包裝div和隱藏需要一個參數的spread

比Kyle所暗示的那種陰影還要縮小！ – 2012-07-20 10:15:45

你可以用一些額外的標記做（一個額外的div包裹，以便它隱藏在其他的陰影，你不想要的元素）

或者你可以使用影子傳播屬性（box-shadow聲明中的第4個數字）縮小陰影以隱藏陰影的側面部分。

這會在底部創建一個較小的陰影，但它不需要額外的HTML。

http://jsfiddle.net/hBMQm/2/

來源

2012-07-20 10:03:11 Kyle

+1。使用額外標記來隱藏不必要的第一個想法比示例更好。 – 2012-07-20 10:16:52

#b { 
    position:absolute; 
    width:100px; 
    height:100px; 
    top:200px; 
    left:200px; 
    background-color:#F0F0F0; 
    text-align:center; 
    box-shadow:20px 20px 22px 0px gray inset; 
}

現在你有內部的陰影，而不是在你的權利，或者底部，你自找的。我誤解了你嗎？

來源

2012-07-20 10:04:11

的box-shadow使用下面的代碼我能達到預期的效果

box-shadow: 0px 20px 22px -20px gray inset;

看到這裏http://jsfiddle.net/hBMQm/3/

來源

2012-07-20 11:11:44 Valerij

+1不錯的答案。 – 2012-07-20 11:22:10

刪除不必要的陰影陰影框

回答

相關問題