Question

我有p元素，我想把顶盒阴影插入和底部标准。这可以通过CSS完成，或者最好使用图像来实现这种效果吗？

Answer 1

试试这个。

.shadow
{
-webkit-box-shadow: inset 0px 8px 4px -4px #0f0, 
-moz-box-shadow: inset    0px 3px 10px #0f0;

-webkit-box-shadow: 0px 3px 10px #2a2a2a;
-moz-box-shadow:    0px 3px 10px #2a2a2a;
}

Answer 2

您可以使用此代码

body {
            margin: 0px;
            padding: 0px;
        }
        .mali_oglas_text:before{
            content: "";
            width: 100%;
            height: 164px;
            top:0;
            left:0;    
            z-index: 9999;
            box-shadow: 0px 10px rgba(221,221,221);
            position: absolute;
        }
        .mali_oglas_text {
            clear: both;
            margin: 30px;
            padding: 30px;
            font-size: 18px;
            line-height: 26px;
            background: white;
            position: relative;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
        }
        h1 {
            clear: both;
            margin: 30px;
            padding: 30px;
            font-size: 18px;
            line-height: 26px;
            background: white;
            box-shadow: inset 0 10px 5px #dbdbdb, 0 6px 0px #dbdbdb;
        }

<p class="mali_oglas_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis.</h1>

CSS box-shadow，top inset和bottom standard

2 个答案: