Question

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

设计

enter image description here

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

现实：

enter image description here

有关如何使用CSS实现此效果的任何建议吗？如果可能，跨浏览器友好。请让我知道......

编辑//////////////////////////////////////编辑

我调查过，我现在正在调查使用box-shadow。我仔细看，但不完全是我需要的。正如您在右上角所看到的，您可以看到一些不完美。如果我移动这个位置的阴影那么它看起来真的不太好。这是输出。

enter image description here

我将边框与阴影结合起来。这是我到目前为止使用的代码：

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

Answer 2

应该有这样做的方法最简单的方法是使用“border-image”但它可能不会完美，但我建议你在这里查看： http://www.w3schools.com/cssref/css3_pr_border-image.asp

如果它没有成功，可能会导致一些错误你可能想看看css 3d grapchis： http://www.adobe.com/devnet/html5/articles/css3-2d-and-3d-graphics-and-animation-effects.html

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

2 个答案: