如何在div或按钮的底部添加阴影？

Question

我想创建一个div的阴影，或者它可能是一个按钮。这个例子可以在here看到。在标题的这个网站上有一个按钮“Free Estimate”，底部有一个阴影。 该网站使用图像显示底部的阴影。但我不想使用图像作为阴影。是否可以使用css创建类似底部的阴影。任何帮助将不胜感激。

看看这张图片，我想要同样的box-shadow。

Answer 1

你可以尝试这个css：

box-shadow: inset 2px -7px 11px rgba(80, 92, 51, 0.17);

DEMO

你想要的影子你可以在这里找到CSS：DETAILS

DEMO LIFTED CORNER SHADOW

CSS：

    .drop-shadow {
            position:relative;
            float:left;
            width:40%;
            padding:1em;
            margin:2em 10px 4em;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
        }

        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        } 

/* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
            border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
            -moz-transform:rotate(-3deg);
            -ms-transform:rotate(-3deg);
            -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
            -moz-transform:rotate(3deg);
            -ms-transform:rotate(3deg);
            -o-transform:rotate(3deg);
            transform:rotate(3deg);
        }

Answer 2

您可以使用{box-shadow: ;}在css中创建阴影。

这是一个可以帮助您的在线工具：http://css3gen.com/box-shadow/

Answer 3

像这样在css中使用box-shadow属性。

box-shadow：0px 4px 5px -3px＃888;

Answer 4

你可以使用它，或者你可以玩这个！

 -moz-box-shadow: -1px 4px 12px #000000;
 -webkit-box-shadow: -1px 4px 12px #000000;
  box-shadow: -1px 4px 12px #000000;

有许多网站可供您创建css3效果，如box-shadow，text-shadow，radius，noise texture，animation，gradient等等。

Webiste for css3 generator