0

正如标题所暗示的那样，我的 H2 元素背景下方的嵌入框阴影存在问题，我需要它位于元素上方。

http://jsfiddle.net/9QYT4/

我已经设置了背景图像，以便根据访问的站点的页面轻松编辑颜色，感谢任何有关如何使阴影出现在 h2 上方的帮助，谢谢！

另外，是否也可以用 png 渐变做这样的事情？这将是一个更好的解决方案，因为我试图只在右侧获得阴影（但它也显示在顶部和底部）

SASS

#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
    background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
    font-size:20px;
    text-transform:uppercase;
    font-weight:normal;
    color:#646567;
    text-align:center;
}}

查看 JSfiddle 上的 HTML，谢谢！

4

1 回答 1

2

我在包含你的影子的元素之后创建了伪元素：http: //jsfiddle.net/jPUX3/

#region-postscript-second:after{
    content: " ";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%; width: 14px;
    box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}

并添加到#region-postscript-second：

position: relative;

最后是关于一侧盒子阴影的东西 - http://css-tricks.com/snippets/css/css-box-shadow/

于 2013-03-04T15:50:15.663 回答