文章/答案/技术大牛

发布

问Webkit边框-半径切断边框
EN

Stack Overflow用户

提问于 2012-09-14 15:39:05

回答 3查看 1.7K关注 0票数 0

我最初想要的是一个带有黑色边框和圆角的图像。然而，在Webkit上，我得到的不是圆角图像和圆角边框，而是矩形图像和圆角边框。矩形图像似乎重叠了边框的部分角落，形成了一个看起来有点奇怪的结果。在firefox和opera上，我已经得到了我想要的结果，但我想知道如何在webkit上达到同样的效果。下面是一些代码，您可以运行它们来了解我所说的内容。提前感谢您的帮助！

<!doctype html>

<html>

<head>
    <title> Testing Website </title>

    <style type="text/css">
        img {
            height: 500px;
            border: 5px solid #000;
            border-radius: 20px;
            -moz-border-radius: 20px;
        }
    </style>
</head>

<body>

    <img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">

</body>

</html>

html

webkit

border

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-09-14 15:55:12

使用box-shadow：http://jsfiddle.net/UQ2kt/

票数 3

Stack Overflow用户

发布于 2012-09-14 15:59:19

你可以试试jQuery插件。提供了很多选择。http://jquery.malsup.com/corner/

票数 0

Stack Overflow用户

发布于 2012-09-14 16:03:26

尝试；

img{
  height: 500px;
  width: 500px;
  border: 5px solid #000;
  border-radius: 20px;
  -moz-border-radius: 20px;
  display:block;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12420093

复制

相似问题

问Webkit边框-半径切断边框
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webkit边框-半径切断边框EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Webkit边框-半径切断边框
EN