Input CSS：边界半径3D直线效果和非曲线效果

我试图在我的联系人表单上得到这个效果，我在操作输入字段。正如您在这张图片中看到的，我创建了一个带有边框的3D效果

设计：

我读过互联网等等，现在我用的是边界半径。问题是它变得很近，但如果我添加更多的像素，它会使曲线变得太圆，如下图所示。如果我加一个更大的数字，我不仅会得到一个弯曲的效果，而且边界也会用它的曲线侵入输入字段

现实：

有什么建议可以让CSS产生这种效果吗？如果可能，跨浏览器友好。请让我知道

编辑//////编辑

我已经调查过了，现在正在调查如何使用

box shadow

。我仔细看了一下，但不完全是我需要的。正如你在右上角看到的，你可以看到一些瑕疵。如果我移动这个位置的阴影，那么它看起来真的不太好。这是输出

我把边界和阴影结合起来。这是我目前使用的代码：

#teleCom li input{
    height: 12.12%; /*60px  */
    width: 48.95%; /*235px*/
    margin-bottom: 2.42%;/*12px*/
    background-color: #bdd4de;
    color: #aac1cc;
    font-family: light;
    font-size: 1.2em;
    padding-left: 2.5%;
    
    border-width: 5px;
    border-style: solid;
    border-color: #a7bdc7;
    border-radius: 7px;
    
    box-shadow: 5px 4px 0px 2px #a7bdc7;
}

我可以使用任何建议或其他CSS属性吗

---

非常感谢

应该有一些方法可以做到这一点，最简单的方法是使用“边框图像”，但它可能不会很完美，但我建议您在这里查看：

如果它不起作用，可能会导致一些错误，您可能想看看css 3d图形：

---

应该有一些方法可以做到这一点，最简单的方法是使用“边框图像”，但它可能不会很完美，但我建议您在此处查看：

如果它不起作用，可能会导致一些错误，您可能想看看css 3d图形： 试试这个：

box-shadow: 
    1px 1px 0px 0px #a7bdc7,
    2px 2px 0px 0px #a7bdc7,
    3px 3px 0px 0px #a7bdc7,
    4px 4px 0px 0px #a7bdc7,
    5px 5px 0px 0px #a7bdc7,
    6px 6px 0px 0px #a7bdc7,
    7px 7px 0px 0px #a7bdc7,
    8px 8px 0px 0px #a7bdc7;

试试这个：

box-shadow: 
    1px 1px 0px 0px #a7bdc7,
    2px 2px 0px 0px #a7bdc7,
    3px 3px 0px 0px #a7bdc7,
    4px 4px 0px 0px #a7bdc7,
    5px 5px 0px 0px #a7bdc7,
    6px 6px 0px 0px #a7bdc7,
    7px 7px 0px 0px #a7bdc7,
    8px 8px 0px 0px #a7bdc7;

---

边界图像对我来说不好，因为我没有使用任何图像，也因为它在我们最亲爱的朋友身上不起作用。。。css 3d图形对于这样的细节来说似乎有点复杂。你还有其他建议吗？谢谢你的帮助边界图像对我不好，因为我没有使用任何图像，也因为它在我们最亲爱的朋友中不起作用。。。css三维图形对于这样的细节似乎有点复杂。你还有其他建议吗？谢谢你的帮助对不起，我查过了。这真是太完美了！正是我需要的。不知道你能做几个阴影。酷！哈哈，我知道。但您可以应用8层阴影。我在寻找另一种选择。但是这个看起来更接近你的需求，对吗？唯一的一点是它会侵入输入字段。我知道有inset属性，也许有一些参数使阴影不进入输入字段？这个问题的答案。只需增加输入的高度即可。这不是一个理想的解决方案，但目前还有效。谢谢你，仔细检查。这真是太完美了！正是我需要的。不知道你能做几个阴影。酷！哈哈，我知道。但您可以应用8层阴影。我在寻找另一种选择。但是这个看起来更接近你的需求，对吗？唯一的一点是它会侵入输入字段。我知道有inset属性，也许有一些参数使阴影不进入输入字段？这个问题的答案。只需增加输入的高度即可。这不是一个理想的解决方案，但目前还有效。谢谢