【问题标题】:box shadow to left and right doesn't work左右框阴影不起作用
【发布时间】:2017-06-14 15:33:56
【问题描述】:

我想在左右两边做box-shadow,但是box的顶部总是有阴影,我检查了很多次我的代码。

#box {
  margin: 0 auto;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}
<div id="box"></div>

【问题讨论】:

标签: css box-shadow


【解决方案1】:

首先了解box-shadowsyntax,然后在您规划设计时轻松在任何一侧应用box-shadow,

syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

#box {
  margin: 0 auto;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
  height: 150px;
  width: 50%;
  background:#cff;
  margin-top:20px;
}
<div id="box"></div>

【讨论】:

  • 欢迎@W.J :-)
  • 但是它对我的数据不起作用:-2px 0 20px -2px #7f7e7f 一旦模糊半径变为 20px,所有边都会有阴影。可以帮我吗?
  • @W.J 检查这个 jsfiddle jsfiddle.net/c3eow8me 你需要调整 offfest-x、offset-y 和 spread-radius
  • 非常感谢!最后一个问题。如何控制阴影的长度?
  • @W.J 增加长度,你需要使用 blur-radius 和 spread-radius 来做到这一点,不断变化,直到你得到计划的结果。 jsfiddle.net/c3eow8me/1
【解决方案2】:

实际上有一个 hack。

您可以通过添加“空”的顶部和底部阴影来实现此目的。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

【讨论】:

    【解决方案3】:

    我认为这不如其他答案好,但这是使用带有阴影的绝对定位伪元素的另一种方法。

    .lr-shadow {
      background:#fff;
      border: 1px solid #fff;
      border-top-color: #e99f2e;
      width:100%;
      max-width:500px;
      height:200px;
      position:relative;
      margin:0 auto;
    }
    .lr-shadow:before, .lr-shadow:after {
      box-shadow: 0 0 20px 2px #7f7e7f;
      content:" ";
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      height:90%;
      z-index:-1;
    }
    .lr-shadow:before {
      left:5px;
    }
    .lr-shadow:after {
      right:5px;
    }
    <div class="lr-shadow"></div>

    【讨论】:

    • 感谢您的回复!看起来很完美!
    【解决方案4】:

    如果将spread设置为blur参数的负数,就可以达到这个效果。对于左框阴影,将position 设置为负blur,将右框阴影position 设置为正blur。我在这个演示中使用了20px

    #box {
      margin: 0 auto;
      margin-top: 40px;
      border: 1px solid #ffffff;
      border-top-color: #e99f2e;
      overflow: hidden;
      width: 150px;
      height: 150px;
      box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
    }
    <div id="box"></div>

    查看this CSS Box-shadow generator 以进一步探索。

    【讨论】:

    • 感谢您的帮助!
    • 但是它对我的数据不起作用:-2px 0 20px -2px #7f7e7f 一旦模糊半径变为 20px,所有边都会有阴影。可以帮我吗?
    • 第一个和最后一个值应该是-20px,而不是-2px
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-13
    相关资源
    最近更新 更多