4

CSSのみを使用して以下を作成することは可能ですか？

ここに画像の説明を入力してください

コンテナと丸みを帯びた角を作成しました。ここでフィドル。

しかし、私はわずかな光沢のある効果を得る方法がわかりません。CSSでこれを行うことは可能ですか？もしそうなら、どのように？

以下は私がこれまでに書いたコードです。

HTML

<div id="phone-outer">
    <div id="phone-inner">

    </div>
</div>

CSS

#phone-outer {
    margin-bottom:200px;
    margin:0 auto;  
    width:400px;
    height:500px;
    background-color:#333;
    -webkit-border-bottom-right-radius:25px;
    -webkit-border-bottom-left-radius:25px;
    -moz-border-radius-bottomright:25px;
    -moz-border-radius-bottomleft:25px;
    border-bottom-right-radius:25px;
    border-bottom-left-radius:25px;
}

#phone-inner {
    margin:0 auto;
    background-color:#FFF;
    width:360px;
    height:460px;   
}
4

4 に答える 4

16

十分に近いことを願っています：

http://jsfiddle.net/UxSdU/13/

#phone-outer {    
    border: 1px solid #FFFFFF;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

    height: 500px;
    width: 400px;
    margin: 0 auto;


    background-image: linear-gradient(right, #111 11%, #333 56%);
    background-image: -o-linear-gradient(right, #111 11%, #333 56%);
    background-image: -moz-linear-gradient(right, #111 11%, #333 56%);
    background-image: -webkit-linear-gradient(right, #111 11%, #333 56%);
    background-image: -ms-linear-gradient(right, #111 11%, #333 56%);
    background-image: gradient(right, #111 11%, #333 56%);
}
于 2013-02-13T13:51:46.483 に答える
6

微妙なグラデーションの輝きを探しているなら、次のようなものがそれを行うはずです：

background:#222 -webkit-radial-gradient(20% 80%, 60% 60%, rgba(255,255,255,.15), rgba(255,255,255,0));

これはWebkit用であり、サポートテーブルに応じて-mozおよび-oと同等のものを適用できます。

複数のボックスシャドウを追加して、次のような黒いシャドウを作成することもできます。

box-shadow:0px 2px .7px 1px #777, inset 0 -7px rgba(0,0,0,.4);

これがデモです：http：//jsbin.com/opinaj/4

ここに画像の説明を入力してください

于 2013-02-13T13:40:53.920 に答える
2

はい、Box-Shadowプロパティを使用できます。

 box-shadow:0px 0px 0px 3px #666;

更新されたフィドルはここにあります：

http://jsfiddle.net/UxSdU/2/

アップデート：

そのためにあなたはボーダーを使うことができます：

更新されたフィドル：

http://jsfiddle.net/UxSdU/6/

于 2013-02-13T13:14:11.863 に答える
0

これを少しhttp://www.colorzilla.com/gradient-editor/で遊んでみれば、何かを理解できるかもしれません。ただし、背景画像の方がはるかに簡単です。その画像だけを使用できない理由は何ですか？

于 2013-02-13T13:11:35.323 に答える