ホームページ > 記事 > ウェブフロントエンド > マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?
マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?
- 藏色散人オリジナル
- 2018-08-10 13:35:453402ブラウズ
この記事では、CSS を使用して画像に枠線を追加する方法を紹介します。Web サイトを構築するときに、CSS 画像に枠線を追加すると、通常、商品画像やポインティング画像が強調表示され、ユーザーがクリックしたくなる可能性があります。実際、CSS 画像に枠線を追加する方法の問題については、インターネットで検索するだけで多くの解決策が見つかります。しかし今日は、最も簡単なコードを使用して CSS で境界線を追加する方法を説明します。興味のある方のお役に立てれば幸いです。
CSS 画像に境界線を追加するための具体的なコード例は次のとおりです:
<!DOCTYPE HTML>
<html>
<head>
<title>css图片加边框代码测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ffffff;color:#06c;}
em{ font-style:inherit;}
img{background:white;margin:0 5px;width:70px;height:70px;}
img:hover{border:1px red solid;}
.demo2 img{border:1px solid transparent;}
.demo2 img:hover{border:1px red solid;}
.demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}
</style>
</head>
<body>
<div>
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<em>这里可以明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div>
<img src="2.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="2.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="2.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="2.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<em>在这里给每个img添加border:1px solid transparent;</em>
</div>
<div>
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<img src="1.png" / alt="マウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?" >
<em>在这里修改width和height</em>
</div>
</body>
</html>上記のコードのテスト効果は次のとおりです:
注: :hover セレクターは、要素を選択するために使用されます。マウスポインタが浮いている状態です。
ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。
ヒント: :link セレクターは、訪問されていないページを指すリンクのスタイルを設定します。:visited セレクターは、訪問済みのページへのリンクを設定するために使用され、:active セレクターはアクティブなリンクに使用されます。
注: スタイルを有効にするには、CSS 定義で :hover を :link および :visited (存在する場合) の後に配置する必要があります。
この記事では、CSS画像に枠線を追加する方法を詳しく紹介します。困っている友達に役立つことを願っています。
以上がマウスが画像上に移動したときに、CSS を使用して画像に境界線効果を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。