1

我试图在我的联系表单上获得这种效果，我正在操作输入字段。正如您在这张图片中看到的，我创建了一个带有边框的 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 属性吗？

非常感谢！

4

2 回答 2

5

试试这个：

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;
于 2012-09-30T11:14:48.677 回答
0

应该有这样做的方法，最简单的方法是使用“边框图像”，但它可能不会完美，但我建议你在这里查看：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-和动画效果.html

于 2012-09-30T10:18:16.767 回答