logo标签列表

使用多个颜色的CSS盒子阴影

css
15

我想在一个div的三个边上使用深色阴影，而在另一侧使用浅色“光晕”效果 -- 实际上是使用两种不同的CSS盒子阴影颜色。目前我想到的最好解决方法是在除了一侧以外的所有边都放置一个阴影，然后使用第二个div来生成光晕效果，并使用第三个div用边距和overflow-hidden属性隐藏除了一侧以外的光晕。我只是想知道是否有比我实现的这种方法更好（只使用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>
2个回答
32
6

尝试在box-shadow的css中使用负扩散值

不要创建第二个带有花哨边距和隐藏的div，尝试玩弄负扩散值。它可以减少你不想让阴影出现在两侧的渗漏。在我的jsfiddle上尝试这个例子，将扩散设置为0、-10、-5...你很快就会掌握。

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

body {
    padding: 10%;
    background-color: #fefefe;
}

div {
    height: 300px;
    width: 300px;
    margin: 0px auto;
    border-radius: 2pt;
    border: 1px solid rgba(0,0,0,0.8);
    background-color: #fefefe;
}
<div id="glow"></div>

我不得不稍微调整一下属性，使它们在不同的浏览器中看起来相似。Mozilla/FF是最麻烦的。看看这些值有多大差异...这有点像一场乏味的猫鼠游戏，需要通过偏移模糊与扩展来解决问题...

  • box-shadow在IE中使用。
  • webkit在Chrome中使用。
  • moz在Firefox中使用。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接