1

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

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

编辑：图像样本 在此处输入图像描述

4

2 回答 2

2

实际上，我在以下链接中使用 Craig Buckler 的方法设法解决了这个问题： 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-19T11:34:16.140 回答
1

阴影效果可以通过css3box-shadow属性来实现。可以在此处找到一些示例，并且该站点允许交互式生成 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-19T00:26:25.300 回答