Тень внутри дива - PullRequest
Новая
       11

Тень внутри дива

11 голосов
/ 12 марта 2012

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

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

Ответы [ 3 ]

24 голосов
/ 12 марта 2012

Да, есть команда 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/

16 голосов
/ 12 марта 2012

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

  • хром> = 10.0 (> = 4.0 с -webkit -приставкой)
  • firefox> = 4.0 (> = 3.5 с -moz -prefix)
  • IE> = 9,0
  • опера> = 10,5
  • safari> = 5.1 (> = 5.0 с -webkit -prefix)
0 голосов
/ 19 марта 2015

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

Шаг 1: Перейти к: Генератор теней

Шаг 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>

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

...