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邊框半徑切除邊框

回答

相關問題