Блог

Мой вопрос простой и прямой. Я хочу применить разделенную ВНУТРЕННЮЮ (а не ВНЕШНЮЮ) границу к видеоэлементу. Ниже приведен простой пример того, что я хочу сделать:

На приведенном выше рисунке черным цветом обозначен элемент video. Красно-зеленый — это внутренняя граница 2px для видеоэлемента.

Я хочу применить красно-зеленую границу внутри видеоэлемента в любом пикселе. Я добился разделенной (красно-зеленой) границы с помощью border-image: 'linear-gradient(to right, #39B54A 50%, #FF0000 50%)1' . Я могу применить обычный одноцветный внутренний бордюр, но не разделенный. Я не хочу никаких обходных путей, таких как использование элемента div поверх элемента video и применение границы к этому элементу div.

Я уверен, что у них есть какой-либо способ сделать это. Спасибо!!

Редактировать :

Вот мой код — в настоящее время я использую Div поверх решения для обхода видео.

 const video = styled.video`
width:${props => props.width}%;
height:${props => props.videoHeight}%;
margin-left:0%;
margin-top:0%;
position: absolute;`;

const divOverVideo= styled.div`
width:${props => props.width}%;
height: ${props => props.height}%;   
margin-left:${props => props.marginLeft}%;
margin-top:${props => props.marginTop}%;
border: ${props => props.border};
border-image:  ${props => props.borderImage};
position: absolute;
display: ${props => props.display};`;
 

В моем HTML-коде я вызываю элемент Div после элемента video.

 <video {...params} />
<divOverVideo {...params} />