CSS: Какой хороший способ создать эффект выпуклой коробки?

Question

То есть, левая и нижняя границы элемента должны придать эффекту 3д выкатывания. Есть ли хороший, чисто CSS-способ для достижения этого эффекта?

Answer 1

Я нашел этот вопрос, пытаясь выяснить это, и я думаю, что вы ищете что-то вроде этого 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 2

#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 3

Вы можете основать свое решение на этом:

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

Answer 4

Вы можете использовать border-bottom-style и border-right-style, как это делает StackOverFlow с тегами.

Использовать стили inset и outset.

Answer 5

Для совместимости с большим количеством браузеров вы можете имитировать вставку / вывод, просто добавив обычную границу снизу и справа или сверху и слева, которая темнее, чем цвет div, на самом деле именно это использует Stackoverflow в настоящее время. для тегов в моем браузере.