CSS shadows on 3 sides

后端 未结 4 1480
夕颜
夕颜 2020-12-21 16:17

I\'m looking at all the CSS Drop shadow tutorials, which are great. Unfortunately, I need to put a shadow on three sides of a block element (left, bottom, right). All the

相关标签:
4条回答
  • 2020-12-21 16:56

    Here's one way to do it:

    <div style='position:relative;'>
        <div style='position:absolute;top:10px;left:10px;width:300px;height:100px;z-index:1;background-color:#CCCCCC'></div>
        <div style='position:absolute;top:0px;left:0px;width:300px;height:100px;z-index:2;background-color:#00CCFF'>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper.</p>
        </div>
    </div>
    

    Size and position the "z-index:1" DIV to your liking.

    0 讨论(0)
  • 2020-12-21 17:03

    Pseudo HTML

    <div style="position:absolute;top:8;left:12;width:200;height:204;background-color:#888888"></div>
    <div style="position:absolute;top:10;left:10;width:200;height:200;background-color:#FFFFFF">The element</div>
    

    You need to play with the size of the shadow. In the above example the shadow is slightly higher than the element so the shadow shows above, its slightly offset to the left so the shadow shows on the right and it is slightly larger than the element so the shadow shows below.

    0 讨论(0)
  • 2020-12-21 17:15

    Thanks everyone. The way I ended up doing it was sorta like this:

    <div id="top_margin"></div>
    <div id="left_right_shadow">this div has a 5 px tall repeating background that is a bit bigger than the width of my content block, shadow on the left, white space, shadow on the right
      <div id="content">Content as normal</div>
    </div>
    <div id="bottom_margin">This has the bottom shadow</div>
    
    0 讨论(0)
  • 2020-12-21 17:17

    make your block element larger/higher, so that it exceeds the sides you want.

    0 讨论(0)
提交回复
热议问题