CSS:边界半径3D直线效果而非弯曲效果

Question

我正在尝试在我的联系表单上获得此效果,我正在操作输入字段.正如您在此图片中看到的,我创建了带边框的3D效果.

设计:

我已经阅读了互联网等等,现在我正在使用border-radius.问题是它接近但是如果我添加更多的像素,它会使我的曲线太圆,如下图所示.如果我添加一个更高的数字,我不仅会获得弯曲效果,而且边框也会以其曲线侵入输入字段.

现实:

有关如何使用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属性？

非常感谢!

Answer 1

试试这个:

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;