在Brave / Chrome浏览器中，图像周围不必要的边框半径角
所以烤面包
我尝试在具有的容器内显示一个简单的图像border-radius: 5px;。但是角落似乎有一个细边框的轮廓（您需要仔细看一下下图）。我如何避免这些拐角边界？
.cover {
margin: 1em;
padding: 1em;
}
.image-wrapper {
height: 15em;
width: 15em;
overflow: hidden;
background-color: black;
border-radius: 15px;
}
img {
height: 100%;
width: auto;
}<div class="cover">
<div class="image-wrapper">
<img
src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg"
/>
</div>
</div>是的，如果我删除，它会消失background-color: black;。但是，我需要保留，background-color并且还需要img { height: 100%; width: auto; }保持宽高比，并在图像尺寸太薄或太宽等情况下照顾场景。
搜索其他类似的问题，我只能找到Safari的问题/答案。我正在使用Brave浏览器。
所以烤面包
这种破解似乎有效。
background-clip: content-box;
padding: 1px;
background-clip: content-box; 具有比浏览器更好的支持 -webkit-mask
.cover {
margin: 1em;
padding: 1em;
}
.image-wrapper {
height: 15em;
width: 15em;
overflow: hidden;
background-color: black;
border-radius: 15px;
background-clip: content-box;
padding: 1px;
}
img {
height: 100%;
width: auto;
}<div class="cover">
<div class="image-wrapper">
<img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" alt="hello" />
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Brave Web浏览器中阻止通知？
- 2
无法在 Ubuntu 19.10 中更新 Brave 浏览器
- 3
如何判断用户是否使用Brave作为浏览器？
- 4
在 Windows 中构建 Brave-Browser 不起作用
- 5
如何为32位lubuntu 16.04安装Brave Web浏览器？
- 6
如何永久修复彩色表情符号（在 Chrome、Brave 浏览器等中使用 Noto 彩色表情符号）（Ubuntu 20.04）
- 7
如何增加Chrome / Chromium / Brave中的最小制表符宽度
- 8
Chrome（Brave）DevTools源面板缺少JS颜色和工具提示
- 9
删除图像周围的默认边框-Chrome浏览器
- 10
div容器中绝对div周围的不必要边框
- 11
如何永久修复颜色表情符号（在Chrome，Brave Browser等中使用Noto颜色表情符号）（Ubuntu 20.04）
- 12
为什么我的JPEG2000格式（.jp2）图像在Safari中显示，但在Chrome或Brave中却没有显示？
- 13
Brave Browser - 禁用导入书签
- 14
图像裁剪父元素的边框半径？（苹果浏览器）
- 15
将Brave的主页添加到Firefox
- 16
从图像中删除不必要的元素
- 17
CSS背景图片线性渐变显示Chrome中不必要的边框
- 18
Android中按钮周围不必要的填充或边距
- 19
不能将Brave Browser与Puppeteer一起使用
- 20
适用于Arch Linux的Brave存储库
- 21
如何为Ubuntu 16.04安装Brave Web Browser
- 22
如何为任何 Linux 发行版获取 Brave Browser
- 23
$（）周围的引号是否不必要？
- 24
Chrome浏览器上的奇怪边框
- 25
WPF菜单-不必要的边框
- 26
删除图像的ListView中不必要的空间
- 27
链接图像的html列表中不必要的填充或空白
- 28
空中打印图像，显示页面中不必要的行
- 29
在Chrome移动浏览器中禁用图像压缩
我来说两句