ホームページ > 記事 > ウェブフロントエンド > CSS 入門チュートリアル: 画像の境界線の境界線
CSS 入門チュートリアル: 画像の境界線の境界線
- 高洛峰オリジナル
- 2017-02-08 10:07:041609ブラウズ
1. 画像のボーダー
「CSS ボーダー」セクションでボーダー属性について詳しく説明します。 CSS では、画像の境界線を定義するために border 属性も使用します。
構文:
<!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: ブラウザーでの 
<!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" を使用して、マウスが画像上を通過したときに灰色の境界線が表示されるように定義しました。 
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。