CSS3でイメージの周りにボーダーを作成する方法 - ダミー

CSS3の画像に一般的な変更の1つは、境界線を追加することです。これにより、ページ上の他のコンテンツのイメージが表示されます。もちろん、CSS3は幅広い種類の境界線を提供します。そのトリックは、あとでその境界で他のタスクを実行できるように、境界をイメージの周りに表示することです。

それでは、HTMLコードの中の部分が有効になります。前の例に示した

タグのコンテナとして使用されるなど、あらゆる種類のものを保持できるコンテナを提供し、さまざまな方法でそのコンテナとやりとりすることができます。次の手順は、画像の周りに枠線を追加するのに役立ちます。

<！ --1 - >

1. テキストエディタで新しいCSSファイルを作成します。

   エディタがCSSファイルをサポートしていない可能性があります。すべてのテキストファイルが行います。

2. 次のCSSスタイル情報を入力します。

   #ImageContainer {border-style：groove; border-width：太い。 border-color：グレー;パディング：5px; float：left;}
   

   このスタイル情報の大部分は境界線です。境界線にパディングを追加すると、枠のように張り付きます。浮動小数点値は、ユーザーがブラウザウィンドウのサイズを変更したときに、ブラウザの右側をたどるのではなく、イメージの周りを保持します。

   画像を左ではなくページの右側に表示する場合は、float：rightを代わりに使用します。 。含まれるコンテナ全体は、左側ではなくページの右側に配置されます。ユーザーがブラウザウィンドウを変更すると、イメージは同じサイズのままですが、ブラウザウィンドウの右側で移動します。

3. ファイルをSimpleGraphicsとして保存します。 CSS。

4. HTMLファイルの領域に次のコードを追加します。

   <！ - 3 - >

   このコードは、HTMLファイルとCSSファイルの間のリンクを作成します。

5. HTMLファイルを保存し、ページをリロードします。

   ボーダーが表示されます。