検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 入門チュートリアル: 画像の境界線の境界線

CSS 入門チュートリアル: 画像の境界線の境界線

高洛峰
高洛峰オリジナル
2017-02-08 10:07:041627ブラウズ

1. 画像のボーダー

「CSS ボーダー」セクションでボーダー属性について詳しく説明します。 CSS では、画像の境界線を定義するために border 属性も使用します。

構文:


border-width: ピクセル値;

border-color: カラー値;

注: または、「border」などのボーダーの簡潔な記述を使用します。 : 1px ソリッドグレー;"。

注:

border 属性を忘れた場合は、戻って自分で確認してください。

例 1: ブラウザーでの 

<!DOCTYPE html>
<head>
    <title>图片边框border</title>
    <style type="text/css">
        img
        {
            width:60px;
            height:60px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>

のプレビュー効果は次のとおりです:

例 2: ブラウザーでの CSS 入門チュートリアル: 画像の境界線の境界線

<!DOCTYPE html>
<head>
    <title>图片边框border</title>
    <style type="text/css">
        img{width:60px;height:60px;}
        img:hover{border:1px solid gray;}
    </style>
</head>
<body>
    <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>

のプレビュー効果は次のとおりです:

分析: この中でたとえば、「: "hover pseudo-class" を使用して、マウスが画像上を通過したときに灰色の境界線が表示されるように定義しました。 CSS 入門チュートリアル: 画像の境界線の境界線

さらに入門的な CSS チュートリアル: 画像境界線関連の記事については、PHP 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML の CSS (属性) の予備調査次の記事：HTML の CSS (属性) の予備調査

関連記事

続きを見る