3

有谁知道像 Twitter 上的这个例子那样在文本框周围添加外边框所需的 CSS？

推特示例

谢谢您的帮助

4

8 回答 8

1

您可以考虑使用多个阴影：

input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
            0 1px 5px rgba(0,0,0,0.2), 
            0 0 0 12px rgba(255,255,255,0.4);
}

我有一个演示，它就像 twitter 的登录表单。如果你想查看，请点击这里。

于 2013-06-10T06:16:03.397 回答
1 
.classname
{
box-shadow:0 0 2px red
}

使用此类或您并将 box-shadow 属性添加到现有类。您可以将 2px 增加到 5px 或 10 以获得更深的阴影

于 2013-01-29T13:48:19.007 回答
1

使用盒子阴影将帮助您：

class{
    box-shadow: horizontal vertical blur-radius spread-radius color;
    box-shadow:2px 0 3px 5px red;
}

水平（-值将向左移动）（+值在右侧）
垂直（-值将向上移动）（+值在downwords上）
blur-radius：将模糊您在框周围选择的颜色
spread-radius：将颜色扩散到选择的距离

于 2013-01-29T13:57:54.913 回答
1

您可以使用box-shadow属性

http://jsfiddle.net/VXJdV/

input {
    display: block;
    margin: 2em;
    box-shadow: 0 0 10px gray;
}
于 2013-01-29T13:52:28.623 回答
1 
input[type="text"],input[type="password"]{
  border: solid 1px #ccc;
  padding: 4px;
  border-radius:4px;
}

您也需要覆盖其他边界半径，-moz-&-webkit-

演示：http: //jsfiddle.net/BqpZh/

于 2013-01-29T13:50:23.593 回答
1 
.front-card .text-input:focus {
    border:1px solid #56b4ef;
    -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
    -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
于 2013-01-29T13:54:44.257 回答
1

您可以在输入框外使用包装 div 并为其赋予背景颜色和圆角！

HTML：

<div class="outter"><input class="inputbox"></input></div>

CSS：

.outter {
    margin: 20px;
    padding: 10px;
    border-radius: 15px;
    background-color: red;
    display: inline-block;
}

.inputbox {
    border-radius: 5px;
}

在这里你有一个 jsfiddle：http: //jsfiddle.net/dsBgw/

于 2013-01-29T13:46:48.397 回答
1

大纲：

input{outline:solid 4px #ccc}

（当然，另一种选择是用 div 包装输入）

于 2013-01-29T13:46:53.287 回答