如何获取div子元素并为Agora视频帧设置圆角？

方案1：通过后代选择器直接定位视频元素 #

假设你的视频父容器类名为video-streams，直接用CSS后代选择器匹配动态生成的<video>元素，即可设置样式：

.video-streams video {
  border-radius: 12px; /* 自定义圆角尺寸 */
  /* 可补充其他样式 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: none;
}

如果JS给每个视频套了外层容器，可调整选择器为.video-streams > div video（根据实际DOM结构修改）。

方案2：给动态元素添加自定义类名（推荐） #

修改你的JavaScript代码，在创建视频元素或其外层容器时手动添加自定义类名，让CSS选择更精准，避免样式冲突：

// 创建video元素时添加类
const videoElement = document.createElement('video');
videoElement.classList.add('chat-video');

// 若有外层容器，也可给容器加类
const videoWrapper = document.createElement('div');
videoWrapper.classList.add('video-wrapper');
videoWrapper.appendChild(videoElement);

对应的CSS代码：

.chat-video {
  border-radius: 12px;
  width: 100%;
  height: auto;
}

.video-wrapper {
  padding: 8px;
  background: #f5f5f5;
  border-radius: 16px;
}

方案3：排查样式冲突 #

如果以上方法无效，按F12打开浏览器开发者工具，选中视频元素查看「Styles」面板：

• 检查border-radius属性是否被划掉，找到覆盖它的样式规则
• 调整CSS选择器优先级（比如增加父元素选择器、使用ID选择器），或临时用!important强制生效（不推荐长期使用）：

.video-streams video {
  border-radius: 12px !important;
}

内容的提问来源于stack exchange，提问作者Mide