首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >火狐-moz-边框-半径不会裁剪出图像?

火狐-moz-边框-半径不会裁剪出图像?
EN

Stack Overflow用户
提问于 2009-08-28 15:38:28
回答 8查看 50.4K关注 0票数 49

如果设置了图片的边框半径,有没有人知道如何让Firefox裁剪边角?它的包含元素可以很好的工作,但我得到丑陋的角落突出。

有没有办法在不将图片设置为背景图片或在我将其放到我的网站之前对其进行处理的情况下修复这个问题?

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2009-08-28 15:47:47

如果将边界半径直接应用于img元素,它是否不会被裁剪?这里有known issues with -moz-border-radius as far as contained content is concerned

--编辑

好吧,它也不裁剪img。如果你的图片是某种png/gif格式的纯背景图片,你可以这样做:

代码语言:javascript
复制
img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

但是,如果你试图在照片上获得圆角,那么它在3.5中是不会起作用的。

票数 19
EN

Stack Overflow用户

发布于 2009-10-19 00:34:22

解决方法:将图像设置为容器元素的背景,然后在该元素上添加边框半径。

票数 21
EN

Stack Overflow用户

发布于 2010-06-19 00:03:16

我想已经有了答案,但很抱歉我的英语……我解决了这个问题,在图像上添加了另一个带有边框而没有背景颜色的div。

代码语言:javascript
复制
#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1347796

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档