Можно ли отображать тень внутри поля div без использования изображений? Вместо этого я хочу использовать команды css.
Итак, есть ли команда вроде: -webkit-box-shadow: 1px inset;?
Тень внутри div
Ответ 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>
Спасибо...;)