1

連絡先フォームでこの効果を得ようとしています。入力フィールドを操作してこれを行っています。この写真でわかるように、境界線で 3D 効果を作成します。

デザイン：

ここに画像の説明を入力

私はインターネットなどを読みましたが、今のところborder-radiusを使用しています。問題は、下の図でわかるように、近づくことですが、より多くのピクセルを追加すると、曲線が丸くなりすぎることです。より高い数値を追加すると、曲線効果が得られるだけでなく、境界線も曲線で入力フィールドに侵入します。

現実：

ここに画像の説明を入力

この効果を 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 グラフィックスを調べてください: http://www.adobe.com/devnet/html5/articles/css3-2d-and-3d-graphics- and-animation-effects.html

于 2012-09-30T10:18:16.767 に答える