4

我有p元素，我想放置顶部盒子阴影插图和底部标准。这可以通过 CSS 完成，还是最好使用图像来实现这种效果？

.mali_oglas_text:before{
    content: "";
    width: 100%; height: 20px;
    top:0; left:0;    
    z-index: -1;
     box-shadow: inset 0 0 5px 0 5px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.4);
}
.mali_oglas_text {clear: both; margin: 0 5px; padding: 7px; background: white; position: relative;
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 3px 10px rgba(0, 0, 0, 0.4);
box-shadow:         0px 3px 10px rgba(0, 0, 0, 0.4);
}
<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. 
 </p>

4

2 回答 2

0

尝试这个。

.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;
}
于 2012-05-22T10:29:46.333 回答
0

您可以使用此代码

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>

于 2019-09-19T06:20:50.793 回答