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 。你可以看到图像适合屏幕，顶部有一个漂亮的边框半径 enter image description here

这是 Safari 。您会看到图像顶部没有边框半径。我不知道这个问题。
enter image description here

为此我也尝试使用：

-webkit-

但那也没有用。有人知道如何解决这个问题吗？

Answer 1

请在下面更新css并检查.....并根据您的requirmnet进行必要的更改..

希望这能解决您的问题

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;
}

保持简单。： - ）

边界半径Safari

2 个答案: