效果大概像这个样子，调整了一下字体大小跟一些显示效果，适合一些4:3画面的游戏侧边展示弹幕。

我个人认为使用浏览器弹幕源的好处是可以分离主播端与观众端的弹幕显示，比如为了便于答谢主播端看弹幕可能要借助一些弹幕工具来合并一些礼物效果，但是这样一来可能会影响观众端的弹幕体验。

单独使用浏览器源显示弹幕然后本地观看弹幕就没有限制了。

当然，局限性也很大，对于直播而言很多时候弹幕的显示是没有必要的，只是在需要搞录播的时候或者一些需要记录的情况下才能派上用场。

以下是CSS部分，贴入OBS浏览器源自定义CSS即可

html {

width: calc(100% - 2px)!important;

height: calc(100% - 2px)!important;

border: 1px solid black;

border-radius: 8px;

background-color:#1542837d;

}

body {

width: calc(100% - 4px)!important;

height: calc(100% - 4px)!important;

border-radius: 7px;

border: 2px solid #806600;

background:url(https://twrpg.fun/RecordFile/QuickSearch/assets/items_bg.png);

}

#app {

width: calc(100% - 4px)!important;

height: calc(100% - 4px)!important;

border: 2px solid #ffcc00;

border-radius: 6px;

}

.room-container {

width: calc(100% - 3px)!important;

height: calc(100% - 3px)!important;

border: 2px solid #806600;

border-radius: 5px;

}

.live-feed.default {

padding-left: 2px;

font-family: 黑体;

background: #122e3c63!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div{

font-size: 1.8rem!important;

line-height: 2.1rem!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.sys>div{

font-size: 1.8rem!important;

line-height: 2.1rem!important;

}

.nickname{

font-size: 1.9rem!important;

line-height: 2.2rem!important;

height: 100%!important;

}

.comment-text{

font-size: 1.8rem!important;

line-height: 2.3rem!important;

color: #f5f7fa!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div>div{

vertical-align: text-top;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div{

font-size: unset;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div .anchor{

vertical-align: text-top;

font-size: 20px;

height: 30px;

line-height: 30px;

padding: 0 12px;

background-color: #ff5722;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.like>div{

font-size: unset;

height: 2.5rem;

line-height: 2.5rem;

}

.live-feed.default .live-feed-messages .slot-item .slot-gift-info .ac-count{

margin-top:0!important;

}

.medal-wrapper .medal-level{

width: 30px;

height: 30px;

font-size: 26px;

line-height: 30px;

}

.medal-wrapper .medal-name{

font-size: 20px;

line-height: 26px;

}

.live-feed .container-live-feed-messages .live-feed-messages>div .message-user-avatar{

width: 40px;

height: 40px;

vertical-align: sub;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.user-enter{

color: yellow;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div .anchor+span{

color: yellow!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div .nickname{

color: yellow!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.follow>div .nickname{

color: yellow!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.follow>div .follow-text{

color: yellow!important;

}

.live-feed .container-live-feed-messages .live-feed-messages>div.comment>div .manage-icon{

background-color: #ff5722;

}

.live-feed .container-live-feed-messages .live-feed-messages .manage-icon{

width: 30px;

height: 30px;

font-size: 20px;

line-height: 30px;

}

整了个仿War3提示框风格OBS弹幕样式