css - css3 ボーダーとボックス シャドウ効果

Question

方法はわかりませんが、境界線を作成し、box-shadow を使用してその境界線に 2 番目の明るいレイヤーを追加し、この画像のように全体に深みを追加します。

どのようにそれを行うことができるかについて何か提案はありますか? 左の境界線は私が達成したいものです。

Answer 1

次を使用して、このようなことを試すことができますbox-shadow：

body { background: #555; }
div {
    background: #666;
    border: 1px solid #393939;
    box-shadow: inset 0 0 1px #999;
    width: 200px;
    height: 150px;
    margin: 20px;
    border-radius: 4px;
}

http://jsfiddle.net/2n2RE/

次に、必要に応じて色の値を調整します。のぼかし量を変更して、box-shadowさまざまな外観を実現することもできます。