Question

我试图在div的三个边上使用暗阴影颜色，并在一侧使用光“发光” - 基本上使用两种不同的颜色作为CSS框阴影。到目前为止，我提出的最好的解决方案是在所有方面放置一个阴影但是一个，并使用第二个带有发光的div和第三个div来隐藏除了一边有边缘和溢出隐藏的所有边上的光晕。我只是想知道是否可能有更好的（仅限CSS）方法而不是我正在实施的方法？有什么想法吗？

在这里演示 - http://swanflighthaven.com/css-shadow-glow.html

在明亮的背景下看起来不那么好看： http://swanflighthaven.com/css-shadow-glow2.html

#main {
    max-width:870px;
    min-width:610px;
    margin:0px auto;
    position:relative;
    top:40px;
    min-height:400px;
}
#maininside {
    position:relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    padding:0px 25px 25px 25px; 

}
#maininner {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow:hidden;
    box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80);
    min-height:385px;
    padding:0px 15px 15px 15px;
    background:url(center.png) repeat;

}
#glow {
    position:absolute;
    height:50px;
    top:0px;
    box-shadow: 0 -10px 20px -5px #7b272c;
    -moz-box-shadow: 0 -10px 20px -5px #7b272c;
    -webkit-box-shadow: 0 -10px 20px -5px #7b272c;
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-right:25px;
    margin-left:25px;
    margin-bottom:25px;
}



    <div id="main">
      <div id="glow">
      </div>
      <div id="maininside">
        <div id="maininner" ></div>
      </div>
    </div>

Answer 1

你可以写出多个阴影，用逗号分隔：

{
 box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c;
}

请参阅https://developer.mozilla.org/En/CSS/Box-shadow

Answer 2

在box-shadow css

中尝试负扩散值

不要使用花哨的边距和隐藏创建第二个div，而是尝试使用负扩展值。它可以减少您不希望阴影出现的侧面出血。在我的jsfiddle上玩这个例子，将点差设置为0，-10，-5 ......你会快速掌握它。

http://jsfiddle.net/CoryDanielson/hSCFw/

代码：

#glow {
              /* x     y   blur spread color */
    box-shadow: /* overridden by webkit/moz */
                 0px -10px 15px -4px  rgba(255,000,000,0.7), /* top - THE RED SHADOW */
                 0px  5px  15px  0px  rgba(000,000,000,0.7), /* bottom */
                 5px  0px  15px  0px  rgba(000,000,000,0.7), /* right */
                -5px  0px  15px  0px  rgba(000,000,000,0.7); /* left */
    -webkit-box-shadow:
                 0px -10px 15px -5px  rgba(255,000,000,0.7), /* top - THE RED SHADOW */
                 0px  5px  15px  0px  rgba(000,000,000,0.7), /* bottom */
                 5px  0px  15px  0px  rgba(000,000,000,0.7), /* right */
                -5px  0px  15px  0px  rgba(000,000,000,0.7); /* left */
    -moz-box-shadow:
                 0px -9px  10px -6px  rgba(255,000,000,0.9), /* top - THE RED SHADOW */
                 0px  5px  10px  0px  rgba(000,000,000,0.7), /* bottom */
                 5px  0px  10px  0px  rgba(000,000,000,0.7), /* right */
                -5px  0px  10px  0px  rgba(000,000,000,0.7); /* left */
}

我不得不稍微使用这些属性，以使它们在不同的浏览器中看起来相似。 Mozilla / FF是最大的痛苦。看看这些价值观有多大差异...这是一种乏味的猫捉老鼠游戏，可以通过传播来消除模糊......

在IE中使用box-shadow。
webkit用于Chrome。
moz用于火狐。

为CSS框阴影使用多种颜色

2 个答案:

在box-shadow css