Question

是否可以使用带黑色边框的普通div，但对于较新的浏览器，使用SVG添加各种阴影效果？

即。边框将显示旧版浏览器，但对于较新的浏览器，您可能会有一个阴影，使div看起来像是一张被抬起的纸张。

编辑：图片示例 enter image description here

Answer 1

我实际上是通过以下链接使用Craig Buckler的方法解决了这个问题： http://www.sitepoint.com/pure-css3-paper-curls/

这种方法基本上使用：before和：后面的div位于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;
}

希望这可以帮助别人。

Answer 2

阴影效果可以通过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>

使用SVG为DIV元素添加着色效果

2 个答案: