使用SVG將陰影效果添加到DIV元素

是否有可能使用SVG標註黑色邊框，但對於較新的瀏覽器使用SVG添加各種陰影效果？使用SVG將陰影效果添加到DIV元素

I.e.該邊框將顯示舊版瀏覽器，但對於較新的瀏覽器，您可能有一個影子，使div看起來像是一張擡起的紙。

編輯：圖片樣品 enter image description here

來源

2013-04-18 Jacques

你嘗試過什麼嗎？你可以看看[svg filters]（http://www.w3.org/TR/SVG/filters.html），但我認爲你也可以用css來實現。 – soyuka

這是一個複雜的陰影，使兩個角落看起來像解除。我們之前已經用CSS試過了，但我們從未得到過很好的影響 – Jacques

顯示一個[fiddle]（http://jsfiddle.net），所以我們可以準確地看到你需要什麼。 – soyuka

陰影效應可通過CSS3 box-shadow屬性來實現。可以找到一些示例here和this Site允許使用立即預覽交互生成CSS子句（也可以使用其他CSS效果）。

示例文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>css3 box shadow demo</title> 
    </head> 
    <body> 
     <div style="width:500px; height:100px; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888;">no content</div> 
    </body> 
</html>

來源

2013-04-19 00:26:25 collapsar

感謝您輸入collapsar，但我們試過盒子陰影，它們無法產生我們正在尋找的效果。我編輯了我的帖子並添加了我們試圖實現的效果的屏幕截圖。 – Jacques

我實際上設法解決這個使用克雷格圓盾的在下面的鏈接方法： http://www.sitepoint.com/pure-css3-paper-curls/

這種方法基本上使用：before和：after僞類定位的DIV背後。他們利用盒子陰影效果以及變形。

這裏是我的HTML：

<div class="note"> 
    <div class="note-shadow-top"> 
     <div class="note-shadow-bottom"> 
      <div class="note-content"> 
       <asp:Literal ID="ContentLiteral" Text="Content" runat="server" /> 
      </div> 
     </div> 
    </div> 
</div>

而這裏的CSS：

.note 
{ 
} 

.note-content 
{ 
    padding: 20px; 
} 

.note p:last-child 
{ 
    margin-bottom: 0; 
} 

.note-shadow-top 
{ 
    position: relative; 
    margin: 20px auto; 
    background-color: #fff; 

    border: 1px solid rgba(0, 0, 0, 0.07); 
} 

    .note-shadow-top:before, .note-shadow-top:after 
    { 
     position: absolute; 
     width: 40%; 
     height: 40%; 
     content: ' '; 
     left: 4px; 
     top: 11px; 
     background: transparent; 
     -webkit-transform: skew(5deg) rotate(1deg); 
     -moz-transform: skew(5deg) rotate(1deg); 
     -ms-transform: skew(5deg) rotate(1deg); 
     -o-transform: skew(5deg) rotate(1deg); 
     transform: skew(5deg) rotate(1deg); 
     -webkit-box-shadow: -4px 0 9px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: -4px 0 9px rgba(0, 0, 0, 0.3); 
     box-shadow: -4px 0 9px rgba(0, 0, 0, 0.3); 
     z-index: -1; 
    } 

    .note-shadow-top:after 
    { 
     left: auto; 
     right: 4px; 
     -webkit-transform: skew(-5deg) rotate(1deg); 
     -moz-transform: skew(-5deg) rotate(1deg); 
     -ms-transform: skew(-5deg) rotate(1deg); 
     -o-transform: skew(-5deg) rotate(1deg); 
     transform: skew(-5deg) rotate(1deg); 
     -webkit-box-shadow: 4px 0 9px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 4px 0 9px rgba(0, 0, 0, 0.3); 
     box-shadow: 4px 0 9px rgba(0, 0, 0, 0.3); 
    } 


.note-shadow-bottom 
{ 
    position: relative; 
    margin: 0 auto; 
} 

    .note-shadow-bottom:before, .note-shadow-bottom:after 
    { 
     position: absolute; 
     width: 40%; 
     height: 10px; 
     content: ' '; 
     left: 0; 
     bottom: 8px; 
     background: transparent; 
     -webkit-transform: skew(-5deg) rotate(-7deg); 
     -moz-transform: skew(-5deg) rotate(-7deg); 
     -ms-transform: skew(-5deg) rotate(-7deg); 
     -o-transform: skew(-5deg) rotate(-7deg); 
     transform: skew(-5deg) rotate(-7deg); 
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
     z-index: -1; 
    } 

    .note-shadow-bottom:after 
    { 
     left: auto; 
     right: 1px; 
     -webkit-transform: skew(5deg) rotate(5deg); 
     -moz-transform: skew(5deg) rotate(5deg); 
     -ms-transform: skew(5deg) rotate(5deg); 
     -o-transform: skew(5deg) rotate(5deg); 
     transform: skew(5deg) rotate(5deg); 
    } 
.ie8 .note-shadow-top, .ie7 .note-shadow-top 
{ 
    border: 1px solid #EBEBEB; 
}

希望這可以幫助別人。

來源

2013-04-19 11:34:16 Jacques

使用SVG將陰影效果添加到DIV元素

回答

相關問題