Geek Answers Handbook

How to insert a frame into the left, bottom, right - not at the top?

I have the following css3 style to insert a shadow:

box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);

The stylesheet appears on all four sides of the box, but I don't want the style to be on top. How can I remove a style from above, but keep the style to the left, bottom, right?

thank

+5
source share
3 answers

Is this what you want:

.right-left-bottom-shadow {
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}

The first is on the left, the second is on the bottom and the last shadow is on the right side. It looks very good if your border has color #CCC.

+9
source

box-shadow, box-shadow , overflow: hidden. , overflow: hidden.

: http://jsfiddle.net/CatChen/Fty2N/3/

+4

There is no CSS method I know for this, but the following may be a workaround (not an ideal solution)

    <div id="mydiv">
       <div class="workaround"></div>
    </div>

CSS

   #mydiv { 
     background-color:#f00;
     height:100px;
     width:100px;
     box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
     padding:0 2px;
  }
 #mydiv .workaround {
    background-color:#f00;
    width:100%;
    height:10px;
 }

Check Fiddle http://jsfiddle.net/bZF48/17/

0
source

More articles:


All Articles