6

我试图弄清楚这是否可以通过 css 实现。我想要一个有阴影的正方形。在正方形的底部，投影完全可见。在正方形的顶部，应该没有明显的阴影。这将是一个渐变，因此在顶部和底部之间，阴影将是一半可见。

关于如何实现这一目标的任何想法？

4

4 回答 4

16

可以模拟在绝对定位的伪元素上使用渐变z-index，使其出现在其父元素下方。

HTML：

<div class='e'></div>

CSS：

.e {
    position: relative;
    width: 10em;
    height: 10em;
    margin: 1em;
    background: lemonchiffon;
}
.e:before {
    position: absolute;
    z-index: -1;
    top: 10%; left: 10%;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, navy);
    content: '';
}

如果你想让阴影有一个褪色的边缘，那么你必须给伪元素一个嵌入的阴影（与.e父元素的背景颜色相同）。

box-shadow: inset 0 0 .5em .5em white;

请注意，这在 IE9 和更早版本中不起作用。您可以filter对这些使用渐变，但不能在 pseudo-elements 上使用，因此在这种情况下您必须做的是向元素添加一个子元素（仅适用于 IE）并设置它的样式，就像您设置伪元素的样式一样。

编辑：如果你想让它在图像、渐变背景上工作，那么恐怕它有点棘手，并且不能只在 IE9 和更早版本中使用 CSS 来完成。但是，在其他浏览器的当前版本中，这可以使用线性渐变和三个径向渐变来实现。

相关CSS：

.e {
    width: 25em; /* give it whatever width and height you like */
    height: 25em;
    /* make padding on right and bottom larger by adding the amount taken by
     * the "shadow"
     */
    padding: 5% 10% 10% 5%;
    box-sizing: border-box;
    /* change navy to red in each of these at one time to see what each
     * gradient covers
     */
    background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
        radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
        radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
        linear-gradient(navy, transparent) 50% 100%;
    background-repeat: no-repeat;
    background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}
于 2012-08-25T11:11:37.817 回答
7

我只需要为我的一个开发人员模拟这个......也许对某人有用：

代码笔
http://codepen.io/anon/pen/aOpOMV

HTML 

<div class="element">
  <div class="inner">
    lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah 
  </div>
</div>

CSS 

.element {
  width:500px; min-height:500px; box-shadow:0 0 8px 0 rgba(0,0,0,.4); margin:0 auto; position:relative;
}
.element:before {
  position:absolute; bottom:0; width:100%; height:80%; content:''; background: linear-gradient(transparent 0%,#fff 100%);transform:scale(1.2);
}
.inner {
  position:relative; z-index:2; padding:20px;
}

注意：不需要宽度/高度..只是为了模拟

于 2015-05-28T17:29:54.627 回答
0

CSS3 的box-shadow属性只接受一个<color>值，没有什么比图像或 CSS 渐变更复杂的了，但我可以想出一些方法来破解它。

首先是让父元素具有渐变背景，然后应用内阴影（假设您可以使用纯色，内阴影与页面背景颜色相同）。然后你把你的实际盒子放在里面。

另一种方法是使用 CSS3 图像边框（使用stretch而不是平铺）。您可以将阴影概括为 CSS 图像边框的特定情况，因此只需在 Photoshop 中创建自己的渐变图像并将其设置为边框。

最后，唯一的其他选项是 CSS2 样式的包装元素和预定义图像。我认为这不再是必要的了，因为现在没有人关心 IE6 和 7。

于 2012-08-25T02:20:30.770 回答
0

如果我理解正确，你想要这样的东西：

box-shadow: black 0 -60px 50px -50px inset

最终值 (-50px) 将阴影在所有边向后剪掉 50px。然后第二个值（-60px）在垂直方向上沿底部取消它，并在底部阴影上增加 10px。第三个值是散布，这是我决定在第四个值中剪裁多少阴影的方式。

但是你会很难使用盒子阴影来做到这一点。除非您知道元素的高度，否则您绝对不能覆盖一半的盒子。最好只使用带有 CSS3 渐变的 background-image 属性。查看此链接了解详情：http ://www.impressivewebs.com/css3-linear-gradient-syntax/

编辑哦，我想明白你的意思。你实际上想要一个阴影，而不是一个嵌入的阴影，但你希望它看起来像一个渐变。大卫的回答更适用。我无法添加评论，但您可以使用 :before 和/或 :after 伪元素作为他的第一个选项。

于 2012-08-25T06:08:49.630 回答