html - 如何解决 Safari 中的边框半径问题?
问题描述
边框应用于视频,但视频并不完全在边框内。我怎样才能把它放在边界内?问题仅在 Safari 中。我添加了一个链接以更清楚地显示它。
下面是CSS。
.video-div
{
justify-content: center;
}
video {
overflow: hidden;
height: 100%;
width: auto;
border: 6px white solid;
border-radius: 50px;
position: absolute;
right: 50%;
left: 50%;
transform: translateX(-50%);
}
谢谢!
解决方案
我想你从这里得到解决方案:
html:
<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
css:
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
推荐阅读
- django - 如何在 Django 中获取登录用户的用户名?
- aws-cdk - 我可以使用从 cdk deploy 创建的值执行另一个脚本吗?
- javascript - 如何使用 create-react-app 进行客户端路由
- python - 如何从 Python 打印到 Zebra RW420
- python - 如何计算数组中的两个元素是否成对?
- reactjs - react-query:无论getQuery是否被缓存,是否有一个回调触发?
- dataframe - 更正格式错误的 CSV 并将更正的数据拉回数据框中
- java - 航空公司预订系统 UML 问题 - 这些方法属于哪里?
- azure - 从 .NET Core Web App 中的 Azure AD 撤消访问权限或刷新组和角色
- reactjs - 在 monorepo 中对资产进行重复数据删除