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>

Answer 1

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

Answer 2

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

Answer 3

尝试;

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

Webkit边界半径切断边界

3 个答案: