13

divの3つの側面に暗い影の色を使用し、片側に明るい「グロー」を使用しようとしています。基本的に、CSSボックスの影に2つの異なる色を使用しています。これまでのところ、私が思いついた最善の解決策は、1つを除くすべての側面に影を配置し、2番目のdivを使用してグローを使用し、3番目の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>
4

2 に答える 2

27

複数のシャドウをカンマ区切りで書き込むことができます。

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

https://developer.mozilla.org/En/CSS/Box-shadowを参照してください

于 2012-04-14T08:25:04.773 に答える
6

ボックスシャドウcssで負のスプレッド値を試してください

派手なマージンと非表示で2番目の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が最大の苦痛でした。値がどれだけ異なるかを見てください...それは猫とマウスの退屈なゲームのようなもので、広がりでぼかしを相殺します...

  • ボックスシャドウはIEで使用されます。
  • webkitはChromeで使用されます。
  • mozはFirefoxで使用されます。

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

于 2012-04-14T08:59:59.437 に答える