发表新帖
发表新帖

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

后端 未结
关注
11 1654
时光说笑
时光说笑 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:22

    I don't think your really need box-shadow-top because if you set offsetx to 0 and offsety to any positive value only remaining shadow is on top.

    if you want to have shadow on top and shadow in the bottom you just can simply use two divs:

    <div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

    if you want to get rid of shadow on sides use rgba instead of hex color and set bigger offsety: 

    box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

    this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity

    full example:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
    0 讨论(0)
  • 隐瞒了意图╮
    2021-01-30 05:23

    No, not directly, but you can crop off the parts that you don't want by putting it in a div with overflow: hidden:

    http://jsfiddle.net/Vehdg/

    0 讨论(0)
  • 日久生厌
    2021-01-30 05:27

    For the same shadow but only on the top :

    box-shadow: inset 0px 6px 5px -5px black;

    To have the shadow in one direction you have to negate the "blur" parameter with the "spread" parameter and then adjust the "h-pos" and/or "v-pos" parameters by this same value. It doesn't work with opposite border or triple border. You have to add one more definition.

    More examples here : http://codepen.io/GBMan/pen/rVXgqP

    0 讨论(0)
  • 谎友^
    2021-01-30 05:31

    You can use a background gradient for a work around in most cases:

    SCSS(with compass) example:

    @include background(linear-gradient(top, #666 1%, #999 3%, #ffffd 6%, #f6f6f6 9%, #f6f6f6 92%, #ffffd 94%, #999 97%, #666 99%) );
    0 讨论(0)
  • 悲哀的现实
    2021-01-30 05:36

    box-shadow is for all four sides. You can't change that (yet?). The 4 sizes in the box-shadow definition are OffsetX, offsetY, Blur and Spread.

    0 讨论(0)
  • 我在风中等你
    2021-01-30 05:37

    I just had this problem myself. The solution that I found was with multiple box-shadows (one for each side that you want your shadow). Here is the definition: 

    box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

    Here is how to think it:

    • first, make the spread 0 (this will disable the effect on all sides)
    • the h-offset (if you set it to be positive, it will cast on the left side, if you set it negative, on the right side)
    • the v-offset (if you set it to be positive, it will cast on the top side, if you set it negative, on the bottom side

    Here you can see my case with box-shadow on three sides (left, top, right and the bottom is with same color as the background to create the effect that I wanted - the left side and the right go all the way to the bottom) https://codepen.io/cponofrei/pen/eMMyQX

    0 讨论(0)
 看不清?
提交回复
热议问题