CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为CSS框阴影使用多种颜色大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在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>
@H_675_9@

解决方法

你可以写多个阴影,逗号分隔:
{
 box-shadow: 0px 0px 28px rgba(0,0.80),0 -10px 20px -5px #7b272c;
}

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

@H_675_9@ @H_675_9@

大佬总结

以上是大佬教程为你收集整理的为CSS框阴影使用多种颜色全部内容,希望文章能够帮你解决为CSS框阴影使用多种颜色所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。