示例:卡片按钮(四)

鼠标移动到图片上会出现边框特效;

padding: 25px; :内边距
margin: 15px; :外边距
width: 350px; :全局图片宽度

<style>
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
	margin: 15px;
  width: 350px;
}
img:hover {
  box-shadow: 0 0 12px 3px rgba(0, 140, 186, 0.5);
}
</style>


<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>
<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>
<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>
<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>
<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>
<a target="_blank" href="paris.jpg">
  <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/06/220201_202824_1.jpg">
</a>