Блог

Главная - Вопросы по программированию - как сделать div похожим на поле, как на изображении?

как сделать div похожим на поле, как на изображении?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

привет, я пытаюсь это сделать

Когда я открываю страницу, мне нужно всплывающее окно в центре страницы, поэтому я создал div и установил для его отображения значение «нет».В document.ready я сделал это так

 $("document").ready(function (){
   $(".box").show();


});

таким образом, он покажет div.

Но я хочу, чтобы мой div был похож на всплывающее окно, как на прикрепленном изображении. как я могу сделать такой div с небольшим 3D-затенением и всем остальным??

введите описание изображения здесь

обновленный код

 -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;

введите описание изображения здесь

Это дает только нижнюю и правую тень.

Комментарии:

1. найдите свойство CSS box-shadow .

2. css-tricks.com/almanac/properties/b/box-shadow

3. пожалуйста, проверьте мой обновленный вопрос с изображениями

4. Вы читали какие-либо комментарии? Читайте о box-shadow

5. Если вы прочитаете документацию, вы обнаружите, что эти значения можно изменить, чтобы изменить положение тени вашего поля. Измените их так, как вы хотите.

Ответ №1:

Ввод .box { box-shadow:-1px 2px 0.2em grey } CSS должен сделать его каким-то образом похожим на изображение.

Ответ №2:

 .box {
  background-color: #FFF;
  width: 180px;
  height: 80px;
  box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.5); /* x-offset y-offset blur size color */
}

Для поддержки нескольких браузеров используйте префиксы, такие как:

-o-box-тень
-ms-box-shadow
-moz-box-тень
-webkit-box-shadow

Чтобы получить желаемый результат, поиграйте со свойствами x-offset, y-offset, blur и size .

Попробуйте что-то вроде этого: 

 box-shadow: 0px 1px 4px 1px #777;

Ответ №3:

Вы можете создать его с помощью http://www.cssmatic.com/box-shadow :

 .scenario-callout-text-right {
    width: 400px;
    height: 200px;
    -webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
}