Подскажите пожалуйста как сделать тень у видео размытой и скругленными углами?

@Kuk2901 · Регистрация: 08.06.2019

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        video{margin: 150px; box-shadow: -10px -10px;}
        .wq{
  border: 2px solid black;
  border-radius: 5px;
}
    </style>
</head>
<body>
<div class="wq">
    <video controls poster="kloyn.png" src="video1.mp4"></video></div>
</body>
</html>

Пытался сделать таким способом, но не получилось(

@Your_Euphoria · 13.04.2020, 21:53

Приведите пример того, что должно получится. Есть генераторы css теней, в которых можно визуально подобрать тень и скопировать код.

@Kuk2901 · 13.04.2020, 22:00 **[ТС]**

Your_Euphoria, вот такая должна быть тень и углы

Подскажите пожалуйста как сделать тень у видео размытой и скругленными углами?

Я попробовал вот так сделать, но не получилось, тень не появляется, и углы скруглены только у картинки, а не у видео

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        video{margin: 200px;  border-radius: 5px; box-sizing: border-box; margin: 150px;  }
        .ed {
            -moz-box-shadow:-5px-5px #777777;
            -webkit-box-shadow: -5px-5px #777777;
             box-shadow: -5px-5px #777777;
            
        }
</style>
</head>
<body>
<div class="wq" style="text-align: center; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
    <video controls width="895" height="598" poster="4.png" class="ed"  style="border: 1px solid black">
        <source  class="ed" src="5.mp4" type="video/mp4">
        </video>
</div>
</body>
</html>

@Your_Euphoria · 13.04.2020, 22:22

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

CSS
1
box-shadow: -5px -5px 5px #777777

Например 5px, а дальше регулируете.
Думаю тень появляется, но где-то прячется. Возможно

CSS
1
overflow: hidden;

в классе wq влияет?
Как у вас получается сейчас?

@Kuk2901 · 13.04.2020, 22:44 **[ТС]**

Your_Euphoria, спасибо тень появилась) но вот я заметил у меня видео меньше картинки подскажите пожалуйста как можно сделать так чтобы они были одинаковыми? А то у меня как-то странно получается(

@Your_Euphoria · 13.04.2020, 23:00

Я не могу понять что у вас видео, а что картинка.
Улитка это постер и он не покрывает всю область тега видео? Тогда попробуйте

CSS
1
object-fit: cover;

для видео

@Kuk2901 · 13.04.2020, 23:09 **[ТС]**

Your_Euphoria, спасибо огромное)))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Your_Euphoria 61 / 46 / 20 Регистрация: 13.06.2019 Сообщений: 101
	13.04.2020, 21:53
	Приведите пример того, что должно получится. Есть генераторы css теней, в которых можно визуально подобрать тень и скопировать код. 0

@Kuk2901 2 / 0 / 0 Регистрация: 08.06.2019 Сообщений: 172
	13.04.2020, 22:44 [ТС]
	Your_Euphoria, спасибо тень появилась) но вот я заметил у меня видео меньше картинки подскажите пожалуйста как можно сделать так чтобы они были одинаковыми? А то у меня как-то странно получается( 0

@Kuk2901 2 / 0 / 0 Регистрация: 08.06.2019 Сообщений: 172
	13.04.2020, 23:09 [ТС]
	Your_Euphoria, спасибо огромное))) 0

Подскажите пожалуйста как сделать тень у видео размытой и скругленными углами?

Решение