Тень внутри div

Можно ли отображать тень внутри поля div без использования изображений? Вместо этого я хочу использовать команды css.

Итак, есть ли команда вроде: -webkit-box-shadow: 1px inset;?

Ответы

Ответ 1

в CSS3 theres box-shadow, который также может быть вложенным, чтобы делать именно то, что вам нужно. это поддерживается следующими браузерами:

  • chrome >= 10.0 ( >= 4.0 с -webkit -prefix)
  • firefox >= 4.0 ( >= 3.5 с -moz -prefix)
  • IE >= 9.0
  • opera >= 10.5
  • safari >= 5.1 ( >= 5.0 с -webkit -prefix)

Ответ 2

Yup есть команда inset. например:

-webkit-box-shadow: 0 0 1px 3px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
box-shadow: 0 0 1px 3px #000 inset;

Вы можете создать здесь http://css3generator.com/

Ответ 3

Вы можете использовать Box теневой генератор для теневых эффектов. Я приведу пример, чтобы показать, как использовать генератор теневого окна.

Шаг 1: Перейдите к: Box Shadow Generator

Шаг 2: отрегулируйте свойство тени, которое вы хотите добавить.

Шаг 3: Затем скопируйте код css с помощью кнопки "Копировать текст".

Шаг 4: Затем вы можете пропустить код css в файл таблицы стилей.

Сделайте так.

<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #banner{

        position: absolute;
        width: 100%;
        height: 150px;
        background-color: #4E6C88;
        -webkit-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
        box-shadow: -1px 9px 18px 0px rgba(0,0,0,0.75);
    }

    </style>
</head>
<body>
 <div id="banner">    

 </div>
</body>
</html>

Спасибо...;)