HTML - 框阴影不使用圆角正方形，即使有透明度

Question

我试图添加一个充当按钮的图像，图像是一个圆角正方形，其中4个角是透明的。我把它添加到我的网页上：

<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >

并将其设为这样：

#LeftButton{
    background-color: Transparent;
    position:relative;
    left:0px;
    top:32.5px;
    width: 45px;
    box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
    height: 45px;
}

我已将div的背景用红色着色，以便您在图片中看到更好

感谢

Answer 1

box shadow使用框形状中的信息生成阴影，以便按预期显示您需要在输入中添加border-radius

#LeftButton{
    background-color: Transparent;
    position:relative;
    left:0px;
    top:32.5px;
    width: 45px;
    box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
    height: 45px;
}

<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >
and style it like this: