css - CSS：隆起したボックス効果を作成するための良い方法は何ですか？

Question

つまり、要素の左と下の境界線は、要素が飛び出す3D効果を与える必要があります。この効果を達成するための良い、純粋なCSSの方法はありますか？

Answer 1

#foo {
    /* ... */
    border:8px outset #999;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}

これがライブの例です: http://jsfiddle.net/sjkXS/1/
はい、ここでの効果は非常に極端で、何が可能かを示すために意図されています。

Answer 2

これも理解しようとしているときにこの質問を見つけました。あなたが探しているのは、このhttp://jsfiddle.net/9Lt2477w/のようなものだと思います。

.raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

ここで助けてくれたhttp://sam-morrow.com/playground/css-cubes.pyに感謝します。box-shadow プロパティに行を追加し続けることができるとは思いもしませんでした。

Answer 3

これに基づいてソリューションを作成できます。

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);

Answer 4

StackOverFlow がタグで行うのと同じように、 border-bottom-styleandを使用できます。border-right-style

スタイルinsetとを使用しますoutset。