空白のみを含むスパンにボックスの影が表示されない

Question

テキストを背景色で飾りつけようとしているので、背景色でスパンで囲んでいます。スパンには境界線の色もあり、境界線がある場合は角が丸くなります。

隣接するスパンの境界線の色が異なるが、背景色が同じで、右側のスパンが左の境界線を丸めているときに問題が発生しています。その場合、背景色は連続して見えません（境界線が丸くなるため）、左の範囲にボックスシャドーを適用して偽装しようとしています。

このソリューションは、ほぼすべての場合に機能します。ただし、左側のスパンに空白だけが含まれている場合は、ボックスシャドウが表示されていないように見えます。これはChrome、Safari、Firefoxで再現可能なため、ブラウザのバグではないようです。ここで

は、私はスタイルにしようとしているhtmlです：ここでは

<div> 
    hello<span class="left"> </span><span class="right"><span>world<span></span> 
</div> 

は、関連するCSSです：

div { 
    white-space: pre-wrap; 
} 

.left { 
    border-style: solid; 
    border-width: 1px 0; 
    border-color: blue; 
    box-shadow: 8px 0 #ddd; 
    background-color: #ddd; 
} 

.right { 
    border-style: solid; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
    border-color: green; 
    border-width: 1px 0 1px 1px; 
    background-color: #ddd; 
} 

.right > span { 
    margin-right: -1px; 
} 

は、ここでは、ボックス影がない例を見ることができますフィドルです

https://jsfiddle.net/fraziermork/jnnjq36b/1/

Answer 1

私はChの中であなたのバイオリンを試してみました：と表示されません。ローマとドロップシャドウはいずれの例でも機能しませんでした。あなたのボックスシャドウプロパティの表記が問題のようです。

box-shadow: 0 0 8px #ddd; 

このスタイル表記は機能するはずです。