如何在CSS邊框上設置陰影？

<div class="row"> 
    some content 

    <div class="info-box"> 
     some other content 
    </div> 
</div> 


.row { 
    float: left; 
    margin-bottom: 1.5%; 
    border: 1px solid #e3e3e3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    background-color: rgb(250, 250, 250); 
    width: 685px; 
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px; 
} 


.row:hover { 
    background-color: rgb(240, 245, 245); 
    -moz-box-shadow: inset 0 0 5px #4d4d4d; 
    -webkit-box-shadow: inset 0 0 5px #4d4d4d; 
    box-shadow:   inset 0 0 5px #4d4d4d; 

} 

.info-box { 
    position: relative; 
    border-left: 1px solid #e3e3e3; 
    padding: 15px; 
    width: 170px; 
    font-size: 0.93em; 
    color: #363636; 
    float: left; 
}

好吧，我有這個信息框內的行。在.row：hover之後，我創建了一個內在的影子。當您將鼠標懸停在行上時，信息框的左側邊框似乎顯示在陰影的頂部。如何在CSS邊框上設置陰影？

我的問題是如果你可以使陰影在邊界之上。提前致謝。

注意：z-index不適用於我。

來源

2013-02-19 tipsywacky

請提供最小的HTML代碼和/或jsfiddle – FelipeAls 2013-02-19 21:04:10

我已經添加了html代碼。感謝提醒。 – tipsywacky 2013-02-19 21:07:10

'border-radius'屬性不需要這麼多的前綴。檢查兼容性表[caniuse]（http://caniuse.com/#search=border-radius）（「顯示所有版本」）。 '-moz-'用於Fx 3.6（可能在一些公司和Linux發行版中使用，不是更多），Saf 4.0，iOS 3.2和Android 2.1的'-webkit-'。 MS和Opera從未使用過這個的前綴 – FelipeAls 2013-02-20 04:12:36

當然，它是最重要的：孩子必須出現在父母之上，否則它會被隱藏。爲了達到預期的效果，您必須將陰影應用於上面的元素，即在.info-box之後。您可以通過使用:afterpseudo-element而無需額外標記來實現此目的。

如果你看看this fiddle，我已經實現了基本命題 - 儘管你可能想要將邊界轉換爲僞元素或調整尺寸以使其定位恰到好處。

基本指導我做了什麼：

給了.row的CSS position: relative，所以我們可以把孩子相對於它。
將規則的.row:hover規則中的背景屬性移至新的.row:hover:after規則。
添加content: ' '強制顯示僞元素。
添加了定位，高度和寬度，頂部和左側，使僞元素覆蓋可用寬度。

編輯：費利佩點出的意見，任何企圖通過點擊內.row將由:after元素被監聽對象，但是建議您可以使用pointer events設置爲pointer-events: none，以緩解這個問題（在everything other than IE and Opera）。我有updated my example to show this in action。

來源

2013-02-19 21:23:33 Barney

空的'content：'''就足夠了。寬度和高度可以替換爲：'left：-1px; right：3px;頂部：-1px;底部：0;'，例如，更精細的定位（如果需要）。 – FelipeAls 2013-02-20 04:05:55

使用'.row：hover：{pointer-events：none;}後可以實現（在某些瀏覽器上，不是全部！）點擊'：after *「* layer * }'。這允許正常的行爲，如點擊.info-box中的鏈接或選擇文本。 – FelipeAls 2013-02-20 04:18:06

如何在CSS邊框上設置陰影？

回答

相關問題