我试图在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.80);
-moz-Box-shadow: 0px 0px 28px rgba(0,0.80);
-webkit-Box-shadow: 0px 0px 28px rgba(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>
解决方法
你可以写多个阴影,逗号分隔：
{
Box-shadow: 0px 0px 28px rgba(0,0.80),0 -10px 20px -5px #7b272c;
}
