3

この Twitter の例のように、テキストボックスの周りに外側の境界線を追加するために必要な CSS を知っている人はいますか?

ツイッターの例

助けてくれてありがとう

4

8 に答える 8

1 
.classname
{
box-shadow:0 0 2px red
}

このクラスまたはあなたを使用して、既存のクラスに box-shadow プロパティを追加します。ブロードシャドウの場合、2pxを5pxまたは10に増やすことができます

于 2013-01-29T13:48:19.007 に答える
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 に答える
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

box-shadowプロパティを使用できます

http://jsfiddle.net/VXJdV/

input {
    display: block;
    margin: 2em;
    box-shadow: 0 0 10px gray;
}
于 2013-01-29T13:52:28.623 に答える
1

ボックス シャドウを使用すると、次のようになります。

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

水平方向 (-値は左方向に移動します) (+値は右方向)
垂直方向 (-値は上方向に移動します) (+値は下方向に移動します)
blur-radius: ボックスの周囲で選択した色をぼかします
。選ばれた距離

于 2013-01-29T13:57:54.913 に答える