html - webkitborder-radius 截断边框

Question

我最初想要一张带有黑色边框和圆角的图像。然而，在 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>

score 3 · Accepted Answer

3

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

于 2012-09-14T07:55:11.963 回答

score 0 · Accepted Answer

0

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

于 2012-09-14T07:59:19.043 回答

score 0 · Accepted Answer

尝试;

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

html - webkitborder-radius 截断边框

3 回答 3

Related

Reference