2

ここで美しいdivの境界線を見つけました：

素敵な div ボーダーのデモ

ボックスにカーソルを入力してください。div の美しい青い影付きの境界線が表示されます。

どうすればこんなに素敵な境界線ができるのでしょうか? 他の参照はありますか？

4

2 に答える 2

5

これをチェックして：

input
{
    border-radius: .2em;
    border: 1px solid #cccccc;

    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

input:focus
{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px     rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

基本的に、境界線に使用されるのは、フォーカスのあるボックス シャドウです。また、フェードイン効果のためにボックス シャドウ間のトランジションを作成します。

ブラウザですべての要素を検査できるため、要素の css コードを表示できることに注意してください。

jsフィドル

box-shadow に関する詳細情報。

于 2013-10-22T06:38:19.893 に答える