2

私はcss3の初心者ですが、CSSツールジェネレーターはたくさんありますが、私が提供するこのイメージをコーディングする方法がわかりません。親切に助けてください??..これは、私の主要なテーマの 1 つでの割り当てに役立ちます。どうもありがとう！

ここに画像の説明を入力

4

4 に答える 4

4

CSS では、div タグで 'border-radius' CSS プロパティを使用して div の角を丸くし、その中に画像を配置するのは非常に簡単です。

HTML は次のようになります。

<div id=image_box>
<img src='someimagelocation'>
</div>

次に、ダイビングのサイズを画像の正確な幅と高さに設定し、オーバーフローが非表示に設定され、境界半径プロパティが設定されていることを確認します。

#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}

これにより、目的の結果が得られるはずです。

追加した：

ドロップシャドウなどを追加するには、同じ div CSS タグで CSS プロパティ「box-shadow」を使用します。

box-shadow:0 1px 2px #aaa;

これらの構文がどのように機能するかをグーグルで検索する必要があります。しかし、私はそれを非常に簡単に研究するために必要なすべてのツールをあなたに与えました

于 2013-03-04T09:12:30.663 に答える
2

トリックはbox-shadow複数回使用することです：

box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;

ここに画像の説明を入力

デモ: http://jsfiddle.net/wUgXk/1/

Google Chrome を使用している場合は、Inspector を開き、いずれかの値 ( など) をクリックして、 キーとキー4pxを押します。値をリアルタイムで微調整して、これらの種類の効果を非常に迅速に設定できます。UpDown

于 2013-03-04T09:23:55.440 に答える
1

これを試して 

 <html>
        <html>
        <head>
        <style type="text/css"> 
        .tbox
{
border:2px solid #b3b3b3;
background:#dddddd;
width:200px;
border-radius:25px;
-moz-border-radius:25px; 
-moz-box-shadow:    1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
 box-shadow:         1px 2px 2px 2px #ccc;
}
        </style>
        </head>
        <body>

        <input type="text" class="tbox" />

        </body>
        </html>
于 2013-03-04T09:13:25.843 に答える
0 
<input type="text"  placeholder="Your Name" style="text-align:center; color:white; background:black;  border-radius:50px; height:30;" />
<input type="email"  placeholder="Enter your email id" style="text-align:center; color:white;  background:black;  border-radius:50px 5px 50px; height:30;" />

別のスタイルの 2 番目のテキスト ボックス

于 2017-12-03T13:10:28.700 に答える