Can CSS3 box-shadow:inset do only one or two sides? like border-top?

后端 未结 11 1641
时光说笑
时光说笑 2021-01-30 04:44

I\'m wondering about the support for side specific inner shadows in css3.

I know this works great on supported browsers.

div { box-shadow:inset 0px 1px 5         


        
相关标签:
11条回答
  • 2021-01-30 05:41
    box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
    -o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
    

    This works just lovely :)

    Here is a codepen illustrating it: http://codepen.io/poopsplat/pen/cGBLy

    0 讨论(0)
  • 2021-01-30 05:42

    using :before and after elements with regular shadows cut of by overflow:hidden on the parent box like in this example: http://dabblet.com/gist/2585782

    CSS

    /**
     * Top and Bottom inset shadow
     */
    
    
    #element{
      background-color: #E3F2F7;
      height: 55px;
      position: relative; /* to position pseudo absolute*/
      overflow: hidden; /* to cut of overflow shadow*/
      margin-top: 200px;    
    }
    
    #element:before , #element:after{
      content: "\0020";
      display: block;
      position: absolute;
      width: 100%;
      height: 1px; /* when 0 no shadow is displayed*/
      box-shadow: #696c5c 0 0 8px 0;
    }
    
    #element:before { top: -1px} /* because of height: 1*/
    #element:after { bottom: -1px}  /* because of height: 1*/
    

    HTML

    <div id="element"></div>
    
    0 讨论(0)
  • 2021-01-30 05:44

    Multiple box shadows did the trick for me.

    box-shadow:
            inset 0 -8px 4px 4px rgb(255,255,255),
            inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
    

    http://jsfiddle.net/kk66f/

    0 讨论(0)
  • 2021-01-30 05:45

    This is what worked for me:

    box-shadow: inset 1px 4px 9px -6px;
    

    Example: http://jsfiddle.net/23Egu/

    0 讨论(0)
  • 2021-01-30 05:47

    You can accomplish a single-sided, inner shadow by setting your div to overflow:hidden and adding shadow elements along the borders.

    Set an inner shadow on the top and bottom borders of a division:

    HTML

    <div id="innerShadow">
        <div id="innerShadowTop">
            Content...
        <div id="innerShadowBottom">
    </div>
    

    CSS

    #innerShadow
    {
        position: relative;
        overflow: hidden;
    }
    
    #innerShadowTop
    {
        width: 100%;
        height: 1px;
        margin: 0;
        padding: 0;
        position: absolute;
        top: -1px;
        -moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
        -webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
        -o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
        box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
    }
    
    #bannerShadowBottom
    {
        width: 100%;
        height: 1px;
        margin: 0;
        padding: 0;
        position: absolute;
        bottom: -1px;
        -moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
        -webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
        -o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
        box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
    }
    
    0 讨论(0)
提交回复
热议问题