Webkit边框半径切除边框

我最初是用黑色边框和圆角的图像。然而，在Webkit中，我没有一个圆形的图像和一个圆形的边框，而是最终形成了一个矩形图像和一个圆形边框。矩形图像似乎与角落的边界部分重叠，使得看起来有点奇怪。在Firefox和Opera上，我想出了我想要的结果，但我想知道如何在webkit上实现相同的效果。这里有一些代码可以运行，以查看我在说什么。先谢谢您的帮助！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>

来源

2012-09-14 RMi Flores

用框阴影代替边框，效果很好！ –

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

来源

2012-09-14 07:55:11 doktorgradus

一个非常好的技巧。谢谢你。 –

工作就像一个魅力。谢谢！ –

@RMiFlores如果这是你工作的答案，你应该接受它的勾号 – PaperThick

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

来源

2012-09-14 07:59:19 PaperThick

试试;

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

来源

2012-09-14 08:03:26

Webkit边框半径切除边框

回答

相关问题