邊界半徑野生動物園

Question

我正在制作橫幅，人們可以在其中上傳圖片。

在上傳之前，您會看到圖像。 只需一個標准的html代碼

<div id="box"><img src="blah blah" /></div>

CSS ：

div {
    width:370px;
    height:204px;
    position:relative;
    overflow:hidden;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

該圖像將完全適合div id =“ box”。 如果可以看到，我使用border-top-left-radius和right-radius：在Firefox和Chrome中效果最佳。 但是在野生動物園中它不起作用。

范例 ：
這是Chrome和Firefox 。 您可以看到圖像適合屏幕，並且頂部有一個很好的邊框半徑。

這是Safari 。 您會看到圖像頂部沒有邊框半徑。 我不知道這個問題。

為此，我也嘗試使用：

-webkit-

但這也沒有用。 有人知道該如何解決野生動物園嗎？

Answer 1

請在css下面更新並檢查...並根據您的要求進行必要的更改。

希望這能解決您的問題

div {
    width:370px;
    height:204px;
    position:relative;
    overflow:hidden;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
}

如果您的問題已解決，請標記為答案...

Answer 2

這就是您所需要的：

div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}

把事情簡單化。 :-)