示例:卡片按钮(四)
鼠标移动到图片上会出现边框特效;
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>