CSS3「加」圖標與不重疊的框陰影

我一直在玩弄CSS中的形狀。我發現這是一切都很好，直到你想添加一個box-shadow或border到您的元素，這是用::before和::after僞元素創建的。CSS3「加」圖標與不重疊的框陰影

下面是我用兩個元素組成的加號（+）圖標的示例。我試圖在這兩個元素上放置一個box-shadow，但當然不希望最頂層的元素（在這種情況下爲::after）陰影與底層元素重疊。

http://codepen.io/trevanhetzel/pen/Gsurk

有沒有人找到解決這個任何聰明的技巧？

下面的代碼，順便

<a class="add"></a> 

.add { 
    position: relative; 
    float: left; 
    padding: 2em; 
    background: green; 
    &::before { 
    content: ""; 
    position: absolute; 
    left: 45%; 
    top: 25%; 
    width: 10%; 
    height: 50%; 
    background: #fff; 
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75)); 
    } 
    &::after { 
    content: ""; 
    position: absolute; 
    left: 25%; 
    top: 45%; 
    width: 50%; 
    height: 10%; 
    background: #fff; 
    @include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75)); 
    } 
}

它輸出這樣的事情（薩斯和指南針FTW！）：http://t.hetz.co/Rpne

來源

2013-10-08 Trevan Hetzel

爲什麼不使用字體圖標，它支持更多形狀的簡單方法，並且可以無需頭疼就可以陰影和顏色。我喜歡的一個很棒的工具是http://icomoon.io/app/ – Pevara

我只是在玩CSS而已:)而且我有一個項目，它有兩個圖標，不需要支持舊版本的瀏覽器， d寧願自己保存一些HTTP請求和字體文件，只使用CSS的強大功能。和icomoon.io +1，如果我需要一個自定義字體庫，這是我的選擇！ –

它的時刻，但過濾器的瀏覽器支持不佳：dropShadow屬性可用於

-webkit-filter: drop-shadow(4px 0px 1px black); 
    -moz-filter: drop-shadow(4px 0px 1px black); 
    filter: drop-shadow(4px 0px 1px black);

Codepen Example

來源

2013-10-08 22:49:02

完全是我在找的東西。以前沒有玩過SVG濾鏡效果，對此並不熟悉。萬分感謝！ –

CSS3「加」圖標與不重疊的框陰影

回答

相關問題